Tabs Section with Accrodion Mobile Responsive Using Tailwind UI
A responsive tabs section component with mobile-friendly accordion, crafted using Tailwind CSS.
tabs
Loading component...
168 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Open Sans', sans-serif;
}
</style>
<!-- Design inspired by https://shareight.com/ -->
<body>
<section class="px-5 py-24 text-gray-600 body-font">
<h1 class="mb-5 text-3xl font-bold text-gray-900 title-font sm:text-5xl md:mb-7 lg:mb-9">The Shareight
Advantage:
</h1>
<ul class="hidden grid-flow-col gap-4 mb-10 text-2xl font-semibold text-gray-400 md:grid text-start">
<li>
<a href="#page1"
class="flex justify-start py-6 border-t border-transparent hover:text-gray-900 hover:border-gray-900">
Quality
</a>
</li>
<li>
<a href="#page2" class="flex justify-start py-6 text-gray-900 border-t border-gray-900">
Access
</a>
</li>
<li>
<a href="#page3"
class="flex justify-start py-6 border-t border-transparent hover:text-gray-900 hover:border-gray-900">
Delivery
</a>
</li>
<li>
<a href="#page4"
class="flex justify-start py-6 border-t border-transparent hover:text-gray-900 hover:border-gray-900">
Result
</a>
</li>
<li>
<a href="#page5"
class="flex justify-start py-6 border-t border-transparent hover:text-gray-900 hover:border-gray-900">
ROI
</a>
</li>
</ul>
<div class="container flex-col items-start hidden mx-auto md:flex md:flex-row">
<div
class="flex flex-col items-center mb-16 lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 md:items-start md:text-left md:mb-0 text-start">
<p class="mb-8 leading-relaxed">All our Shopping Portals and Commerce Content Articles are beautifully designed
with elegant functionality. Our CSS activity uses premium media brand platforms, which are a strong brand fit
with our clients’ products.</p>
</div>
<div class="w-5/6 lg:max-w-lg lg:w-full md:w-1/2">
<img class="object-cover object-center rounded" alt="hero"
src="https://shareight.com/wp-content/uploads/2022/04/quality-1-2048x1365.jpg.webp">
</div>
</div>
<div class="md:hidden" id="accordion-collapse" data-accordion="collapse">
<h2 id="accordion-collapse-heading-1">
<button type="button"
class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border-t border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
data-accordion-target="#accordion-collapse-body-1" aria-expanded="true"
aria-controls="accordion-collapse-body-1">
<span>Quality</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5 5 1 1 5" />
</svg>
</button>
</h2>
<div id="accordion-collapse-body-1" class="hidden" aria-labelledby="accordion-collapse-heading-1">
<div class="p-5 border-t border-gray-200 dark:border-gray-700 dark:bg-gray-900">
<p class="mb-2 text-gray-500 dark:text-gray-400">All our Shopping Portals and Commerce Content Articles are
beautifully designed with elegant functionality. Our CSS activity uses premium media brand platforms, which
are a strong brand fit with our clients’ products.</p>
</div>
</div>
<h2 id="accordion-collapse-heading-2">
<button type="button"
class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border-t border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
data-accordion-target="#accordion-collapse-body-2" aria-expanded="false"
aria-controls="accordion-collapse-body-2">
<span>Access</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5 5 1 1 5" />
</svg>
</button>
</h2>
<div id="accordion-collapse-body-2" class="hidden" aria-labelledby="accordion-collapse-heading-2">
<div class="p-5 border-t border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">Choose from our portfolio of publishing partners, all through
a single point of contact, for all your Commerce Content and CSS activity.</p>
</div>
</div>
<h2 id="accordion-collapse-heading-3">
<button type="button"
class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border-t border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
data-accordion-target="#accordion-collapse-body-3" aria-expanded="false"
aria-controls="accordion-collapse-body-3">
<span>Delivery</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5 5 1 1 5" />
</svg>
</button>
</h2>
<div id="accordion-collapse-body-3" class="hidden" aria-labelledby="accordion-collapse-heading-3">
<div class="p-5 border-t border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">We’ve spent 10 years perfecting a winning process, combining
the talents of in-house writers, designers and ad specialists with proprietary, custom-built technology to
find the market advantage and deliver your objectives.</p>
</div>
</div>
<h2 id="accordion-collapse-heading-4">
<button type="button"
class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border-t border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
data-accordion-target="#accordion-collapse-body-4" aria-expanded="false"
aria-controls="accordion-collapse-body-4">
<span>Results</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5 5 1 1 5" />
</svg>
</button>
</h2>
<div id="accordion-collapse-body-4" class="hidden" aria-labelledby="accordion-collapse-heading-4">
<div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">Our Machine Learning technology constantly monitors
performance across all campaign types to ensure we deliver on the relevant KPIs throughout the consideration
phases of the customer journey.</p>
</div>
</div>
<h2 id="accordion-collapse-heading-5">
<button type="button"
class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border-t border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
data-accordion-target="#accordion-collapse-body-5" aria-expanded="false"
aria-controls="accordion-collapse-body-5">
<span>ROI</span>
<svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5 5 1 1 5" />
</svg>
</button>
</h2>
<div id="accordion-collapse-body-5" class="hidden" aria-labelledby="accordion-collapse-heading-5">
<div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">You need to measure what matters in each phase of the
customer journey. Shareight’s products sit between awareness-generating advertising and performance-driven
deals to give you outstanding engagement: page views, dwell time, CTR and conversion, all designed to
deliver industry-leading ROI.</p>
</div>
</div>
</div>
</section>
</body>