Tabs Component
A responsive Tabs Component with a Skeuomorphic design, an Analogous color scheme, and a dark theme support, suitable for professional business websites. The component uses Tailwind CSS for styling and includes no JavaScript.
HTML Code
<div class="bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-950 p-8 rounded-xl shadow-2xl m-4
font-sans text-gray-800 dark:text-gray-200">
<div class="flex border-b-2 border-gray-300 dark:border-gray-700 mb-6 space-x-2">
<!-- Tab 1 Button -->
<input type="radio" name="tabs" id="tab1" class="hidden" checked>
<label for="tab1" class="relative block cursor-pointer px-6 py-3 text-lg font-semibold
text-gray-600 dark:text-gray-400
hover:text-amber-700 hover:dark:text-amber-300
transition-colors duration-300
peer-checked:text-amber-800 peer-checked:dark:text-white
peer-checked:bg-gradient-to-b peer-checked:from-white peer-checked:via-gray-100 peer-checked:to-gray-200
peer-checked:dark:from-gray-700 peer-checked:dark:via-gray-800 peer-checked:dark:to-gray-900
peer-checked:border-x peer-checked:border-t peer-checked:border-gray-300 peer-checked:dark:border-gray-700
rounded-tl-lg rounded-tr-lg
before:absolute before:bottom-0 before:left-0 before:right-0 before:h-1 before:bg-transparent
peer-checked:before:bg-amber-500 peer-checked:before:dark:bg-amber-400
peer-checked:before:shadow-[0_0_15px_rgba(251,191,36,0.6)]">
Company Profile
</label>
<!-- Tab 2 Button -->
<input type="radio" name="tabs" id="tab2" class="hidden">
<label for="tab2" class="relative block cursor-pointer px-6 py-3 text-lg font-semibold
text-gray-600 dark:text-gray-400
hover:text-amber-700 hover:dark:text-amber-300
transition-colors duration-300
peer-checked:text-amber-800 peer-checked:dark:text-white
peer-checked:bg-gradient-to-b peer-checked:from-white peer-checked:via-gray-100 peer-checked:to-gray-200
peer-checked:dark:from-gray-700 peer-checked:dark:via-gray-800 peer-checked:dark:to-gray-900
peer-checked:border-x peer-checked:border-t peer-checked:border-gray-300 peer-checked:dark:border-gray-700
rounded-tl-lg rounded-tr-lg
before:absolute before:bottom-0 before:left-0 before:right-0 before:h-1 before:bg-transparent
peer-checked:before:bg-amber-500 peer-checked:before:dark:bg-amber-400
peer-checked:before:shadow-[0_0_15px_rgba(251,191,36,0.6)]">
Our Services
</label>
<!-- Tab 3 Button -->
<input type="radio" name="tabs" id="tab3" class="hidden">
<label for="tab3" class="relative block cursor-pointer px-6 py-3 text-lg font-semibold
text-gray-600 dark:text-gray-400
hover:text-amber-700 hover:dark:text-amber-300
transition-colors duration-300
peer-checked:text-amber-800 peer-checked:dark:text-white
peer-checked:bg-gradient-to-b peer-checked:from-white peer-checked:via-gray-100 peer-checked:to-gray-200
peer-checked:dark:from-gray-700 peer-checked:dark:via-gray-800 peer-checked:dark:to-gray-900
peer-checked:border-x peer-checked:border-t peer-checked:border-gray-300 peer-checked:dark:border-gray-700
rounded-tl-lg rounded-tr-lg
before:absolute before:bottom-0 before:left-0 before:right-0 before:h-1 before:bg-transparent
peer-checked:before:bg-amber-500 peer-checked:before:dark:bg-amber-400
peer-checked:before:shadow-[0_0_15px_rgba(251,191,36,0.6)]">
Contact Us
</label>
</div>
<!-- Tab Content 1 -->
<div role="tabpanel" aria-labelledby="tab1" class="tab-content" id="content1">
<h2 class="text-3xl font-bold text-amber-700 dark:text-amber-300 mb-4
drop-shadow-lg">About Our Company</h2>
<p class="mb-6 leading-relaxed text-gray-700 dark:text-gray-300">
Founded in 2005, we have grown into a leading innovator in sustainable energy solutions.
Our commitment to excellence and customer satisfaction drives us to deliver cutting-edge technologies.
We believe in a future powered by clean, renewable resources, and we are dedicated to making that a reality.
</p>
<img src="https://picsum.photos/id/150/800/400" alt="Modern Office Building" class="rounded-lg shadow-xl mb-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Our Mission</h3>
<p class="text-gray-600 dark:text-gray-400">To empower businesses and communities with reliable,
eco-friendly energy alternatives, fostering a greener planet for generations to come.</p>
</div>
<div>
<h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Our Vision</h3>
<p class="text-gray-600 dark:text-gray-400">To be the global leader in renewable energy, recognized for our
innovation, integrity, and significant positive impact on the environment.</p>
</div>
</div>
</div>
<!-- Tab Content 2 -->
<div role="tabpanel" aria-labelledby="tab2" class="tab-content hidden" id="content2">
<h2 class="text-3xl font-bold text-amber-700 dark:text-amber-300 mb-4
drop-shadow-lg">Comprehensive Service Portfolio</h2>
<p class="mb-6 leading-relaxed text-gray-700 dark:text-gray-300">
We offer a wide array of services designed to meet the diverse needs of our clients,
from initial consultation and system design to installation and ongoing maintenance.
Our solutions are tailored to maximize efficiency and deliver sustainable results.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
border border-gray-200 dark:border-gray-700
hover:shadow-xl transition-shadow duration-300">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Solar Solutions</h3>
<p class="text-gray-600 dark:text-gray-400">Residential and commercial solar panel installation and maintenance.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
border border-gray-200 dark:border-gray-700
hover:shadow-xl transition-shadow duration-300">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Wind Energy Consulting</h3>
<p class="text-gray-600 dark:text-gray-400">Site assessment, turbine selection, and project management.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
border border-gray-200 dark:border-gray-700
hover:shadow-xl transition-shadow duration-300">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Energy Audits</h3>
<p class="text-gray-600 dark:text-gray-400">Thorough analysis to identify energy inefficiencies and recommend improvements.</p>
</div>
</div>
<img src="https://picsum.photos/id/152/800/400" alt="Renewable Energy Solutions" class="rounded-lg shadow-xl">
</div>
<!-- Tab Content 3 -->
<div role="tabpanel" aria-labelledby="tab3" class="tab-content hidden" id="content3">
<h2 class="text-3xl font-bold text-amber-700 dark:text-amber-300 mb-4
drop-shadow-lg">Connect With Us</h2>
<p class="mb-6 leading-relaxed text-gray-700 dark:text-gray-300">
We are always eager to hear from you. Whether you have a question, a project inquiry, or just want to chat,
our team is ready to assist. Reach out to us through the methods below!
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
border border-gray-200 dark:border-gray-700">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Our Office</h3>
<p class="text-gray-600 dark:text-gray-400">123 Eco-Friendly Lane, Green City, GC 12345</p>
<p class="text-gray-600 dark:text-gray-400">United States</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
border border-gray-200 dark:border-gray-700">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Get in Touch</h3>
<p class="text-gray-600 dark:text-gray-400">Email: <a href="mailto:[email protected]"
class="text-amber-600 dark:text-amber-400 hover:underline">[email protected]</a></p>
<p class="text-gray-600 dark:text-gray-400">Phone: (123) 456-7890</p>
</div>
</div>
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Service Representative"
class="w-20 h-20 rounded-full shadow-lg border-4 border-amber-400 dark:border-amber-500">
<div>
<p class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe, Lead Representative</p>
<p class="text-gray-600 dark:text-gray-400">"We're here to help you power your future."</p>
</div>
</div>
</div>
</div>
<style>
/* Base styling for the tab content - hidden by default */
.tab-content {
display: none;
}
/* Show the content associated with the checked radio button */
input[name="tabs"]:checked + label + .tab-content {
display: block;
}
/* If using sibling combinator for tab content not directly adjacent */
input#tab1:checked ~ #content1,
input#tab2:checked ~ #content2,
input#tab3:checked ~ #content3 {
display: block;
}
</style>Related Components
Tabs Component
A responsive tabs component designed in a skeuomorphic style for an e-commerce application, using a pastel color scheme and Tailwind CSS.
Tabs Component
A brutalist-style Tabs Component for social media, with complementary colors and a complex, responsive design, including dark theme support.
Tabs Component
A responsive Tabs component with Material Design styling, monochromatic color scheme, and dark theme support, built with Tailwind CSS for content-heavy websites.