import React from 'react'

function InsuranceTabs() {
  return (
    <section className="lqd-section tab-items pt-40 pb-55">
        <div className="container">
            <div className="row">
                <div className="col col-12">
                    <div className="lqd-tabs lqd-tabs-style-3 mb-30" data-tabs-options='{"trigger": "click"}'>
                        <nav className="lqd-tabs-nav-wrap mb-2em">
                            <ul className="reset-ul lqd-tabs-nav flex items-center justify-between border-black-10" role="tablist">
                                <li data-bs-controls="lqd-tab-item-1" role="presentation" className="text-center">
                                    <a className="active" href="#lqd-tab-item-1" aria-expanded="false" aria-controls="lqd-tab-item-1" role="tab" data-bs-toggle="tab">
                                        <span className="iconbox flex-col items-center justify-center relative">
                                            <span className="contents flex flex-col relative z-2">
                                                <span className="iconbox-title font-medium my-0 text-16 leading-1/15em font-body">Health Insurance</span>
                                            </span>
                                        </span>
                                        <span className="lqd-tabs-nav-progress">
                                            <span className="lqd-tabs-nav-progress-inner"></span>
                                        </span>
                                    </a>
                                </li>
                                <li data-bs-controls="lqd-tab-item-2" role="presentation" className="text-center">
                                    <a href="#lqd-tab-item-2" aria-expanded="false" aria-controls="lqd-tab-item-2" role="tab" data-bs-toggle="tab">
                                        <span className="iconbox flex-col items-center justify-center relative">
                                            <span className="contents flex flex-col relative z-2">
                                                <span className="iconbox-title font-medium my-0 text-16 leading-1/15em font-body">Travel Insurance</span>
                                            </span>
                                        </span>
                                        <span className="lqd-tabs-nav-progress">
                                            <span className="lqd-tabs-nav-progress-inner"></span>
                                        </span>
                                    </a>
                                </li>
                                <li data-bs-controls="lqd-tab-item-3" role="presentation" className="text-center">
                                    <a href="#lqd-tab-item-3" aria-expanded="false" aria-controls="lqd-tab-item-3" role="tab" data-bs-toggle="tab">
                                        <span className="iconbox flex-col items-center justify-center relative">
                                            <span className="contents flex flex-col relative z-2">
                                                <span className="iconbox-title font-medium my-0 text-16 leading-1/15em font-body">Private Insurance</span>
                                            </span>
                                        </span>
                                        <span className="lqd-tabs-nav-progress">
                                            <span className="lqd-tabs-nav-progress-inner"></span>
                                        </span>
                                    </a>
                                </li>
                                <li data-bs-controls="lqd-tab-item-4" role="presentation" className="text-center">
                                    <a href="#lqd-tab-item-4" aria-expanded="false" aria-controls="lqd-tab-item-4" role="tab" data-bs-toggle="tab">
                                        <span className="iconbox flex-col items-center justify-center relative">
                                            <span className="contents flex flex-col relative z-2">
                                                <span className="iconbox-title font-medium my-0 text-16 leading-1/15em font-body">Car Insurance</span>
                                            </span>
                                        </span>
                                        <span className="lqd-tabs-nav-progress">
                                            <span className="lqd-tabs-nav-progress-inner"></span>
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                        <div className="lqd-tabs-content">
                            <div id="lqd-tab-item-1" role="tabpanel" className="lqd-tabs-pane pt-20 fade active show" aria-labelledby="lqd-tab-item-1">
                                <div className="row items-center">
                                    <div className="col col-12 col-lg-6">
                                        <figure className="inline-flex flex-grow-1 max-w-full relative mb-30">
                                            <a href="./assets/images/demo/insurance/tab-items/Image@2x.jpg" className="fresco">
                                                <img width="1054" height="832" src="./assets/images/demo/insurance/tab-items/Image@2x.jpg" alt="tab item" />
                                            </a>
                                        </figure>
                                    </div>
                                    <div className="col col-12 col-lg-5 offset-lg-1">
                                        <div className="w-full flex flex-col pr-15percent lg:pr-0">
                                            <div className="ld-fancy-heading">
                                                <p className="ld-fh-element py-5 px-15 mb-1/5em rounded-5em bg-green-100 text-14 text-green-500">Free Consultation</p>
                                            </div>
                                            <div className="ld-fancy-heading">
                                                <h2 className="ld-fh-element mb-0/25em leading-1em text-48">Private Health Insurance.</h2>
                                            </div>
                                            <div className="ld-fancy-heading">
                                                <p className="ld-fh-element mb-2/75em leading-1/3em text-16 text-gray-700">Holistic development and support for employees the aim of being a first-choice</p>
                                            </div>
                                            <div className="iconbox iconbox-inline text-align-default iconbox-circle iconbox-heading-xs mb-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(124, 191, 152)", "hoverColor": "rgb(255, 255, 255)"}'>
                                                <div className="iconbox-icon-wrap">
                                                    <span className="iconbox-icon-container flex items-center justify-center relative text-green-300 bg-green-100 text-16 w-30 h-30 rounded-full">
                                                        <span className="iconbox-icon-hover-bg inline-block w-full h-full top-0 left-0 opacity-0 absolute transition-opacity bg-primary"></span>
                                                        <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                                    </span>
                                                </div>
                                                <h3 className="text-18">Injuries or Vehicle Damages</h3>
                                            </div>
                                            <div className="iconbox iconbox-inline text-align-default iconbox-circle iconbox-heading-xs mb-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(124, 191, 152)", "hoverColor": "rgb(255, 255, 255)"}'>
                                                <div className="iconbox-icon-wrap">
                                                    <span className="iconbox-icon-container flex items-center justify-center relative text-green-300 bg-green-100 text-16 w-30 h-30 rounded-full">
                                                        <span className="iconbox-icon-hover-bg inline-block w-full h-full top-0 left-0 opacity-0 absolute transition-opacity bg-primary"></span>
                                                        <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                                    </span>
                                                </div>
                                                <h3 className="text-18">Protected Policy</h3>
                                            </div>
                                            <div className="iconbox iconbox-inline text-align-default iconbox-circle iconbox-heading-xs mb-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(124, 191, 152)", "hoverColor": "rgb(255, 255, 255)"}'>
                                                <div className="iconbox-icon-wrap">
                                                    <span className="iconbox-icon-container flex items-center justify-center relative text-green-300 bg-green-100 text-16 w-30 h-30 rounded-full">
                                                        <span className="iconbox-icon-hover-bg inline-block w-full h-full top-0 left-0 opacity-0 absolute transition-opacity bg-primary"></span>
                                                        <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                                    </span>
                                                </div>
                                                <h3 className="text-18">Annual Bonus and Extras</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="lqd-tab-item-2" role="tabpanel" className="lqd-tabs-pane pt-20 fade" aria-labelledby="lqd-tab-item-2">
                                <div className="row items-center">
                                    <div className="col col-12 col-lg-6">
                                        <figure className="inline-flex flex-grow-1 max-w-full relative mb-30">
                                            <a href="./assets/images/demo/insurance/tab-items/Image@2x.jpg" className="fresco">
                                                <img width="1054" height="832" src="./assets/images/demo/insurance/tab-items/Image@2x.jpg" alt="tab item" />
                                            </a>
                                        </figure>
                                    </div>
                                    <div className="col col-12 col-lg-5 offset-lg-1">
                                        <div className="w-full flex flex-col pr-15percent">
                                            <div className="ld-fancy-heading">
                                                <p className="ld-fh-element py-5 px-15 mb-1/5em bg-green-100 rounded-5em text-14 text-green-500">Free Consultation</p>
                                            </div>
                                            <div className="ld-fancy-heading">
                                                <h2 className="ld-fh-element mb-0/25em leading-1em text-48">Private Travel Insurance.</h2>
                                            </div>
                                            <div className="ld-fancy-heading">
                                                <p className="ld-fh-element mb-2/75em leading-1/3em text-16 text-gray-700">Holistic development and support for employees the aim of being a first-choice</p>
                                            </div>
                                            <div className="iconbox iconbox-inline text-align-default iconbox-circle iconbox-heading-xs mb-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(124, 191, 152)", "hoverColor": "rgb(255, 255, 255)"}'>
                                                <div className="iconbox-icon-wrap">
                                                    <span className="iconbox-icon-container flex items-center justify-center relative text-green-300 bg-green-100 text-16 w-30 h-30 rounded-full">
                                                        <span className="iconbox-icon-hover-bg inline-block w-full h-full top-0 left-0 opacity-0 absolute transition-opacity bg-primary"></span>
                                                        <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                                    </span>
                                                </div>
                                                <h3 className="text-18">Injuries or Vehicle Damages</h3>
                                            </div>
                                            <div className="iconbox iconbox-inline text-align-default iconbox-circle iconbox-heading-xs mb-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(124, 191, 152)", "hoverColor": "rgb(255, 255, 255)"}'>
                                                <div className="iconbox-icon-wrap">
                                                    <span className="iconbox-icon-container flex items-center justify-center relative text-green-300 bg-green-100 text-16 w-30 h-30 rounded-full">
                                                        <span className="iconbox-icon-hover-bg inline-block w-full h-full top-0 left-0 opacity-0 absolute transition-opacity bg-primary"></span>
                                                        <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                                    </span>
                                                </div>
                                                <h3 className="text-18">Protected Policy</h3>
                                            </div>
                                            <div className="iconbox iconbox-inline text-align-default iconbox-circle iconbox-heading-xs mb-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(124, 191, 152)", "hoverColor": "rgb(255, 255, 255)"}'>
                                                <div className="iconbox-icon-wrap">
                                                    <span className="iconbox-icon-container flex items-center justify-center relative text-green-300 bg-green-100 text-16 w-30 h-30 rounded-full">
                                                        <span className="iconbox-icon-hover-bg inline-block w-full h-full top-0 left-0 opacity-0 absolute transition-opacity bg-primary"></span>
                                                        <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                                    </span>
                                                </div>
                                                <h3 className="text-18">Annual Bonus and Extras</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="lqd-tab-item-3" role="tabpanel" className="lqd-tabs-pane pt-20 fade" aria-labelledby="lqd-tab-item-3">
                                <div className="row items-center">
                                    <div className="col col-12 col-lg-6">
                                        <figure className="inline-flex flex-grow-1 max-w-full relative mb-30">
                                            <a href="./assets/images/demo/insurance/tab-items/Image@2x.jpg" className="fresco">
                                                <img width="1054" height="832" src="./assets/images/demo/insurance/tab-items/Image@2x.jpg" alt="tab item" />
                                            </a>
                                        </figure>
                                    </div>
                                    <div className="col col-12 col-lg-5 offset-lg-1">
                                        <div className="w-full flex flex-col pr-15percent">
                                            <div className="ld-fancy-heading">
                                                <p className="ld-fh-element py-5 px-15 mb-1/5em bg-green-100 rounded-5em text-14 text-green-500">Free Consultation</p>
                                            </div>
                                            <div className="ld-fancy-heading">
                                                <h2 className="ld-fh-element mb-0/25em leading-1em text-48">Private Health Insurance.</h2>
                                            </div>
                                            <div className="ld-fancy-heading">
                                                <p className="ld-fh-element mb-2/75em leading-1/3em text-16 text-gray-700">Holistic development and support for employees the aim of being a first-choice</p>
                                            </div>
                                            <div className="iconbox iconbox-inline text-align-default iconbox-circle iconbox-heading-xs mb-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(124, 191, 152)", "hoverColor": "rgb(255, 255, 255)"}'>
                                                <div className="iconbox-icon-wrap">
                                                    <span className="iconbox-icon-container flex items-center justify-center relative text-green-300 bg-green-100 text-16 w-30 h-30 rounded-full">
                                                        <span className="iconbox-icon-hover-bg inline-block w-full h-full top-0 left-0 opacity-0 absolute transition-opacity bg-primary"></span>
                                                        <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                                    </span>
                                                </div>
                                                <h3 className="text-18">Injuries or Vehicle Damages</h3>
                                            </div>
                                            <div className="iconbox iconbox-inline text-align-default iconbox-circle iconbox-heading-xs mb-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(124, 191, 152)", "hoverColor": "rgb(255, 255, 255)"}'>
                                                <div className="iconbox-icon-wrap">
                                                    <span className="iconbox-icon-container flex items-center justify-center relative text-green-300 bg-green-100 text-16 w-30 h-30 rounded-full">
                                                        <span className="iconbox-icon-hover-bg inline-block w-full h-full top-0 left-0 opacity-0 absolute transition-opacity bg-primary"></span>
                                                        <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                                    </span>
                                                </div>
                                                <h3 className="text-18">Protected Policy</h3>
                                            </div>
                                            <div className="iconbox iconbox-inline text-align-default iconbox-circle iconbox-heading-xs mb-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(124, 191, 152)", "hoverColor": "rgb(255, 255, 255)"}'>
                                                <div className="iconbox-icon-wrap">
                                                    <span className="iconbox-icon-container flex items-center justify-center relative text-green-300 bg-green-100 text-16 w-30 h-30 rounded-full">
                                                        <span className="iconbox-icon-hover-bg inline-block w-full h-full top-0 left-0 opacity-0 absolute transition-opacity bg-primary"></span>
                                                        <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                                    </span>
                                                </div>
                                                <h3 className="text-18">Annual Bonus and Extras</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="lqd-tab-item-4" role="tabpanel" className="lqd-tabs-pane pt-20 fade" aria-labelledby="lqd-tab-item-4">
                                <div className="row items-center">
                                    <div className="col col-12 col-lg-6">
                                        <figure className="inline-flex flex-grow-1 max-w-full relative mb-30">
                                            <a href="./assets/images/demo/insurance/tab-items/Image@2x.jpg" className="fresco">
                                                <img width="1054" height="832" src="./assets/images/demo/insurance/tab-items/Image@2x.jpg" alt="tab item" />
                                            </a>
                                        </figure>
                                    </div>
                                    <div className="col col-12 col-lg-5 offset-lg-1">
                                        <div className="w-full flex flex-col pr-15percent">
                                            <div className="ld-fancy-heading">
                                                <p className="ld-fh-element py-5 px-15 mb-1/5em bg-green-100 rounded-5em text-14 text-green-500">Free Consultation</p>
                                            </div>
                                            <div className="ld-fancy-heading">
                                                <h2 className="ld-fh-element mb-0/25em leading-1em text-48">Private car Insurance.</h2>
                                            </div>
                                            <div className="ld-fancy-heading">
                                                <p className="ld-fh-element mb-2/75em leading-1/3em text-16 text-gray-700">Holistic development and support for employees the aim of being a first-choice</p>
                                            </div>
                                            <div className="iconbox iconbox-inline text-align-default iconbox-circle iconbox-heading-xs mb-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(124, 191, 152)", "hoverColor": "rgb(255, 255, 255)"}'>
                                                <div className="iconbox-icon-wrap">
                                                    <span className="iconbox-icon-container flex items-center justify-center relative text-green-300 bg-green-100 text-16 w-30 h-30 rounded-full">
                                                        <span className="iconbox-icon-hover-bg inline-block w-full h-full top-0 left-0 opacity-0 absolute transition-opacity bg-primary"></span>
                                                        <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                                    </span>
                                                </div>
                                                <h3 className="text-18">Injuries or Vehicle Damages</h3>
                                            </div>
                                            <div className="iconbox iconbox-inline text-align-default iconbox-circle iconbox-heading-xs mb-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(124, 191, 152)", "hoverColor": "rgb(255, 255, 255)"}'>
                                                <div className="iconbox-icon-wrap">
                                                    <span className="iconbox-icon-container flex items-center justify-center relative text-green-300 bg-green-100 text-16 w-30 h-30 rounded-full">
                                                        <span className="iconbox-icon-hover-bg inline-block w-full h-full top-0 left-0 opacity-0 absolute transition-opacity bg-primary"></span>
                                                        <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                                    </span>
                                                </div>
                                                <h3 className="text-18">Protected Policy</h3>
                                            </div>
                                            <div className="iconbox iconbox-inline text-align-default iconbox-circle iconbox-heading-xs mb-15" data-animate-icon="true" data-plugin-options='{"color": "rgb(124, 191, 152)", "hoverColor": "rgb(255, 255, 255)"}'>
                                                <div className="iconbox-icon-wrap">
                                                    <span className="iconbox-icon-container flex items-center justify-center relative text-green-300 bg-green-100 text-16 w-30 h-30 rounded-full">
                                                        <span className="iconbox-icon-hover-bg inline-block w-full h-full top-0 left-0 opacity-0 absolute transition-opacity bg-primary"></span>
                                                        <i className="lqd-icn-ess icon-ion-ios-checkmark"></i>
                                                    </span>
                                                </div>
                                                <h3 className="text-18">Annual Bonus and Extras</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
  )
}

export default InsuranceTabs