import React from 'react'

const BlockquoteBackgroundColorTextFont = () => {
    return (
        <div className="col-xl-12">
            <div className="card h-100 p-0">
                <div className="card-header border-bottom bg-base py-16 px-24">
                    <h6 className="text-lg fw-semibold mb-0">
                        Blockquote Background Color Text
                    </h6>
                </div>
                <div className="card-body p-24">
                    <div className="row gy-4">
                        <div className="col-lg-4 col-sm-6">
                            <div className="p-16 bg-info-50 radius-8 border-start-width-3-px border-info border-top-0 border-end-0 border-bottom-0">
                                <h6 className="text-primary-light text-md mb-8">
                                    Custom Blockquote Primary Example
                                </h6>
                                <span className="text-info mb-0">- WowDash</span>
                            </div>
                        </div>
                        <div className="col-lg-4 col-sm-6">
                            <div className="p-16 bg-success-50 radius-8 border-start-width-3-px border-success-main border-top-0 border-end-0 border-bottom-0">
                                <h6 className="text-primary-light text-md mb-8">
                                    Custom Blockquote Primary Example
                                </h6>
                                <span className="text-success mb-0">- WowDash</span>
                            </div>
                        </div>
                        <div className="col-lg-4 col-sm-6">
                            <div className="p-16 bg-info-50 radius-8 border-start-width-3-px border-info-main border-top-0 border-end-0 border-bottom-0">
                                <h6 className="text-primary-light text-md mb-8">
                                    Custom Blockquote Primary Example
                                </h6>
                                <span className="text-info-main mb-0">- WowDash</span>
                            </div>
                        </div>
                        <div className="col-lg-4 col-sm-6">
                            <div className="p-16 bg-danger-50 radius-8 border-start-width-3-px border-danger-main border-top-0 border-end-0 border-bottom-0">
                                <h6 className="text-primary-light text-md mb-8">
                                    Custom Blockquote Primary Example
                                </h6>
                                <span className="text-danger-main mb-0">- WowDash</span>
                            </div>
                        </div>
                        <div className="col-lg-4 col-sm-6">
                            <div className="p-16 bg-warning-50 radius-8 border-start-width-3-px border-warning-main border-top-0 border-end-0 border-bottom-0">
                                <h6 className="text-primary-light text-md mb-8">
                                    Custom Blockquote Primary Example
                                </h6>
                                <span className="text-warning-main mb-0">- WowDash</span>
                            </div>
                        </div>
                        <div className="col-lg-4 col-sm-6">
                            <div className="p-16 bg-neutral-50 radius-8 border-start-width-3-px border-neutral-600 border-top-0 border-end-0 border-bottom-0">
                                <h6 className="text-primary-light text-md mb-8">
                                    Custom Blockquote Primary Example
                                </h6>
                                <span className="text-primary-light mb-0">- WowDash</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default BlockquoteBackgroundColorTextFont