Tailwind UI Details Components / Responsive
Easily display descriptions, additional content, FAQs, product details using Tailwind ui details components.
All Images use in this website for showing purpose only, if you want to use in your business website please purchase it.
Preview
Specifications
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam facilis quasi dolores, id quo praesentium temporibus corporis quia suscipit deserunt? Repudiandae ullam suscipit facilis
Available in 10 Days
Available in 10 Days
Available in 10 Days
Available in 10 Days
Frameset
- Frame
- Fork
- Headset
- Ordinal Carbon
- Ordinal Carbon, 1-1/8′ to 1.5′
- Integrated Carbon, 1-1/8′ to 1.5′
Wheels
- Rims
- Spokes
- Wheel sizes
- Tires
- Ordinal Lights
- Stainless Steels
- 700C
- Ordinal Riddle lights
Show Code
<div class="max-w-7xl pt-24 pb-12 mx-auto px-4 xl:px-0">
<div class="grid grid-cols-1 md:grid-cols-12 gap-12">
<div class="md:col-span-6 col-span-1">
<h4 class="text-4xl font-medium">Specifications</h4>
</div>
<div class="md:col-span-6 col-span-1">
<p class="text-lg">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam facilis quasi dolores, id quo praesentium temporibus corporis quia suscipit deserunt? Repudiandae ullam suscipit facilis
</p>
<button class="text-[#0071e3] text-lg font-medium mt-6">Explore All</button>
</div>
<div class="md:col-span-6 col-span-1">
<div class="aspect-video overflow-hidden rounded-2xl">
<img class="h-full mx-auto" src="https://designcools.com/wp-content/uploads/2024/11/1.png" alt="tailwind component design" />
</div>
<label class="text-2xl font-medium flex justify-center">Classic Green</label>
<p class="text-center text-sm text-gray-700 mt-2">
Available in 10 Days
</p>
</div>
<div class="md:col-span-6 col-span-1">
<div class="aspect-video overflow-hidden rounded-2xl">
<img class="h-full mx-auto" src="https://designcools.com/wp-content/uploads/2024/11/x1cherryred.jpg" alt="tailwind component design" />
</div>
<label class="text-2xl font-medium flex justify-center">Classic Red</label>
<p class="text-center text-sm text-gray-700 mt-2">
Available in 10 Days
</p>
</div>
<div class="md:col-span-6 col-span-1">
<div class="aspect-video overflow-hidden rounded-2xl">
<img class="h-full mx-auto" src="https://designcools.com/wp-content/uploads/2024/10/x1Yellow.jpg" alt="tailwind component design" />
</div>
<label class="text-2xl font-medium flex justify-center">Classic Yellow</label>
<p class="text-center text-sm text-gray-700 mt-2">
Available in 10 Days
</p>
</div>
<div class="md:col-span-6 col-span-1">
<div class="aspect-video overflow-hidden rounded-2xl">
<img class="h-full mx-auto" src="https://designcools.com/wp-content/uploads/2024/11/T-RexAir_orange.jpg" alt="tailwind component design" />
</div>
<label class="text-2xl font-medium flex justify-center">Classic Orange</label>
<p class="text-center text-sm text-gray-700 mt-2">
Available in 10 Days
</p>
</div>
</div>
<div class="grid grid-cols-12 pt-24">
<div class="lg:col-span-4 col-span-12 mb-14">
<h5 class="text-xl py-4 font-medium">Frameset</h5>
</div>
<div class="lg:col-span-4 col-span-6 mb-14">
<ul class="text-lg">
<li class="py-4">Frame</li>
<li class="py-4">Fork</li>
<li class="py-4">Headset</li>
</ul>
</div>
<div class="lg:col-span-4 col-span-6 mb-14">
<ul class="text-lg">
<li class="py-4">Ordinal Carbon</li>
<li class="py-4">Ordinal Carbon, 1-1/8' to 1.5'</li>
<li class="py-4">Integrated Carbon, 1-1/8' to 1.5'</li>
</ul>
</div>
<div class="lg:col-span-4 col-span-12">
<h5 class="text-xl py-4 font-medium">Wheels</h5>
</div>
<div class="lg:col-span-4 col-span-6">
<ul class="text-lg">
<li class="py-4 ">Rims</li>
<li class="py-4 ">Spokes</li>
<li class="py-4 ">Wheel sizes</li>
<li class="py-4 ">Tires</li>
</ul>
</div>
<div class="lg:col-span-4 col-span-6">
<ul class="text-lg">
<li class="py-4">Ordinal Lights</li>
<li class="py-4">Stainless Steels</li>
<li class="py-4">700C</li>
<li class="py-4">Ordinal Riddle lights</li>
</ul>
</div>
</div>
<div class="flex justify-center mt-20">
<button class="text-lg bg-black py-2 px-6 rounded-full text-white flex items-center gap-x-4">
<span>Show Specifications</span>
<svg xmlns="http://www.w3.org/2000/svg" width="28px" height="28px" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48-88a8,8,0,0,1-8,8H136v32a8,8,0,0,1-16,0V136H88a8,8,0,0,1,0-16h32V88a8,8,0,0,1,16,0v32h32A8,8,0,0,1,176,128Z"></path></svg>
</button>
</div>
</div>Preview
Books
5 Jan 2020
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, amet eaque distinctio repellendus nostrum laboriosam quam laudantium minus exercitationem? Iure numquam asperiores eveniet adipisci incidunt quibusdam deserunt excepturi dignissimos consequatur!
Inspiration
15 Sep 2020
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit explicabo quia tenetur totam magni qui. Accusantium debitis saepe vel reiciendis hic cumque sunt, adipisci esse amet reprehenderit illum, autem voluptates.
Detective
28 Dec 2020
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum perspiciatis provident repellendus, sed minus doloribus neque sint. Nesciunt praesentium aspernatur totam amet beatae, non voluptate numquam natus dignissimos, quod quisquam!
Show Code
<div class="px-4 lg:px-0 max-w-7xl mx-auto py-12">
<div class="mb-10 border-t border-b divide-y">
<div class="grid py-8 sm:grid-cols-4">
<div class="mb-4 sm:mb-0">
<div class="space-y-1 text-xs font-semibold tracking-wide uppercase">
<a href="/" aria-label="blog section">Books</a>
<p class="text-gray-500">5 Jan 2020</p>
</div>
</div>
<div class="sm:col-span-3">
<div class="mb-3">
<a href="/" aria-label="blog section">
<p class="text-3xl font-extrabold leading-none sm:text-4xl xl:text-4xl">
Improve SEO of your website to get more leads.
</p>
</a>
</div>
<p class="text-gray-700 md:line-clamp-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, amet eaque distinctio repellendus nostrum laboriosam quam laudantium minus exercitationem? Iure numquam asperiores eveniet adipisci incidunt quibusdam deserunt excepturi dignissimos consequatur!
</p>
</div>
</div>
<div class="grid py-8 sm:grid-cols-4">
<div class="mb-4 sm:mb-0">
<div class="space-y-1 text-xs font-semibold tracking-wide uppercase">
<a href="/" aria-label="blog section">Inspiration</a>
<p class="text-gray-500">15 Sep 2020</p>
</div>
</div>
<div class="sm:col-span-3">
<div class="mb-3">
<a href="/" aria-label="blog section">
<p class="text-3xl font-extrabold leading-none sm:text-4xl xl:text-4xl">
Learn Digital Marketing
</p>
</a>
</div>
<p class="text-gray-700 md:line-clamp-3">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit explicabo quia tenetur totam magni qui. Accusantium debitis saepe vel reiciendis hic cumque sunt, adipisci esse amet reprehenderit illum, autem voluptates.
</p>
</div>
</div>
<div class="grid py-8 sm:grid-cols-4">
<div class="mb-4 sm:mb-0">
<div class="space-y-1 text-xs font-semibold tracking-wide uppercase">
<a href="/" aria-label="Category">Detective</a>
<p class="text-gray-500">28 Dec 2020</p>
</div>
</div>
<div class="sm:col-span-3">
<div class="mb-3">
<a href="/" aria-label="blog section">
<p class="text-3xl font-extrabold leading-none sm:text-4xl xl:text-4xl">
Empower your business
</p>
</a>
</div>
<p class="text-gray-700 md:line-clamp-3">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum perspiciatis provident repellendus, sed minus doloribus neque sint. Nesciunt praesentium aspernatur totam amet beatae, non voluptate numquam natus dignissimos, quod quisquam!
</p>
</div>
</div>
</div>
<div class="flex justify-center items-center">
<a href="/" aria-label="blog section" class="inline-flex items-center font-semibold ">
See all articles
<svg xmlns="http://www.w3.org/2000/svg" class="ml-2" width="20" height="20" fill="#000000" viewBox="0 0 256 256"><path d="M48,80v96a8,8,0,0,1-16,0V80a8,8,0,0,1,16,0Zm189.66,42.34-96-96A8,8,0,0,0,128,32V72H72a8,8,0,0,0-8,8v96a8,8,0,0,0,8,8h56v40a8,8,0,0,0,13.66,5.66l96-96A8,8,0,0,0,237.66,122.34Z"></path></svg>
</a>
</div>
</div>Preview
Welcome to Opixo.
Temporibus autem quibusdam et aut officiis debitis aut voluptates at rerum molestiae non recusandae earum rerum.
Cras ultricies turpis hendrerit fringilla.
Maecenas tempus tellus condimentum rhoncus.
Donec pede justo fringilla.
Where
3929 Hide Gate A Way Main Road Santa Clara, CA 95054
When
Saturday to Thursday (09:00 am to 05:00 pm) July 15 to 19, 2017
Show Code
<section id="about">
<div class="mx-auto max-w-7xl px-4 xl:px-0">
<div class="grid lg:grid-cols-2 grid-cols-1 items-center gap-10">
<div class="lg:order-2">
<div class="grid grid-cols-12 items-center gap-6">
<div class="col-span-5">
<img src="https://designcools.com/wp-content/uploads/2024/11/2.jpg" class="max-w-full max-h-full rounded-md" alt="about section design" />
</div>
<div class="col-span-7">
<img src="https://designcools.com/wp-content/uploads/2024/11/event-speakers.png" class="max-w-full max-h-full rounded-md" alt="about us component design" />
</div>
</div>
</div>
<div class="lg:me-6">
<div class="my-auto">
<h2 class="text-3xl font-bold mb-4">Welcome to <span class="text-primary">Opixo.</span></h2>
<div class="flex flex-col mb-6">
<p class="text-base font-light mb-2">Temporibus autem quibusdam et aut officiis debitis aut voluptates at rerum molestiae non recusandae earum rerum.</p>
<p class="text-base font-light mb-2">Cras ultricies turpis hendrerit fringilla.</p>
<p class="text-base font-light mb-2">Maecenas tempus tellus condimentum rhoncus.</p>
<p class="text-base font-light mb-2">Donec pede justo fringilla.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 items-center gap-y-6 gap-x-10 mb-10">
<div class="">
<div class="h-10 w-10 inline-flex justify-center items-center bg-gray-200 text-primary text-2xl/none rounded-md mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" class="h-6 w-6">
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
</div>
<h3 class="text-lg font-medium mb-1">Where</h3>
<p class="text-sm leading-relaxed font-light text-gray-700">3929 Hide Gate A Way Main Road Santa Clara, CA 95054</p>
</div>
<div class="">
<div class="h-10 w-10 inline-flex justify-center items-center bg-gray-200 text-primary text-2xl/none rounded-md mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" class="h-6 w-6">
<path d="M10.1 2.18a9.93 9.93 0 0 1 3.8 0"></path>
<path d="M17.6 3.71a9.95 9.95 0 0 1 2.69 2.7"></path>
<path d="M21.82 10.1a9.93 9.93 0 0 1 0 3.8"></path>
<path d="M20.29 17.6a9.95 9.95 0 0 1-2.7 2.69"></path>
<path d="M13.9 21.82a9.94 9.94 0 0 1-3.8 0"></path>
<path d="M6.4 20.29a9.95 9.95 0 0 1-2.69-2.7"></path>
<path d="M2.18 13.9a9.93 9.93 0 0 1 0-3.8"></path>
<path d="M3.71 6.4a9.95 9.95 0 0 1 2.7-2.69"></path>
<circle cx="12" cy="12" r="1"></circle>
</svg>
</div>
<h3 class="text-lg leading-relaxed font-medium mb-1">When</h3>
<p class="text-sm font-light text-gray-700">Saturday to Thursday (09:00 am to 05:00 pm) July 15 to 19, 2017</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Preview
Leadership
Leslie Alexander
Co-Founder / CEO
Michael Foster
Co-Founder / CTO
Dries Vincent
Partner & Business Relations
Show Code
<div class="mx-auto max-w-7xl px-4 xl:px-0 mt-4 sm:mt-32 lg:mt-20">
<div class="grid grid-cols-1 gap-6 pt-12 sm:pt-16 sm:grid-cols-4 xl:gap-8">
<div class="sm:col-span-4 lg:col-span-1"><h2 class="font-display text-3xl font-bold text-neutral-950">Leadership</h2></div>
<div class="sm:col-span-4 lg:col-span-3">
<ul class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 xl:gap-8">
<li>
<div>
<div class="group relative overflow-hidden rounded-3xl bg-neutral-100">
<img
alt=""
loading="lazy"
width="1800"
height="1800"
class="h-96 md:h-[20rem] lg:h-96 w-full object-cover grayscale transition duration-500 motion-safe:group-hover:scale-105"
src="https://designcools.com/wp-content/uploads/2024/11/lady-150x150.jpeg"
/>
<div class="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black to-black/0 to-40% p-6">
<p class="font-display text-base/6 font-semibold tracking-wide text-white">Leslie Alexander</p>
<p class="mt-2 text-sm text-white">Co-Founder / CEO</p>
</div>
</div>
</div>
</li>
<li>
<div>
<div class="group relative overflow-hidden rounded-3xl bg-neutral-100">
<img
alt=""
loading="lazy"
width="1800"
height="1800"
class="h-96 md:h-[20rem] lg:h-96 w-full object-cover grayscale transition duration-500 motion-safe:group-hover:scale-105"
src="https://designcools.com/wp-content/uploads/2024/11/lady2-150x150.jpeg"
/>
<div class="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black to-black/0 to-40% p-6">
<p class="font-display text-base/6 font-semibold tracking-wide text-white">Michael Foster</p>
<p class="mt-2 text-sm text-white">Co-Founder / CTO</p>
</div>
</div>
</div>
</li>
<li>
<div>
<div class="group relative overflow-hidden rounded-3xl bg-neutral-100">
<img
alt=""
loading="lazy"
width="1800"
height="1800"
class="h-96 md:h-[20rem] lg:h-96 w-full object-cover grayscale transition duration-500 motion-safe:group-hover:scale-105"
src="https://designcools.com/wp-content/uploads/2024/11/man-150x150.jpeg"
/>
<div class="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black to-black/0 to-40% p-6">
<p class="font-display text-base/6 font-semibold tracking-wide text-white">Dries Vincent</p>
<p class="mt-2 text-sm text-white">Partner & Business Relations</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>Preview
Web Design
Full Time in Manchester
We are looking for someone to join our Data & Analytics team here at This is Digital. The successful candidate will support clients with report builds (Google Data Studio / Google Sheets / Supermetrics), whilst providing the agency and colleagues with day-to-day analytical support.
Web Development
Full Time in Manchester
We are looking for someone to join our Data & Analytics team here at This is Digital. The successful candidate will support clients with report builds (Google Data Studio / Google Sheets / Supermetrics), whilst providing the agency and colleagues with day-to-day analytical support.
Show Code
<div class="mx-auto max-w-7xl px-4 xl:px-0">
<div class="flex group flex-wrap justify-between py-8">
<div class="w-full sm:w-4/12">
<span class="block w-2.5 h-2.5 max-h-2.5 bg-emerald-400 rounded-full mr-2 sm:mr-3 sm:w-3.5 sm:h-3.5 sm:max-h-3.5"></span>
<h2 class="text-2xl xl:text-3xl font-medium text-gray-900 mt-3">
Web Design
</h2>
<p class="text-gray-500 sm:mt-2">
Full Time in Manchester
</p>
</div>
<div class="w-full pt-4 sm:pt-6 sm:w-8/12 sm:pl-5 xl:flex xl:flex-wrap xl:justify-between">
<div class="w-full xl:w-7/12">
<p class="text-base leading-loose">
We are looking for someone to join our Data & Analytics team here at This is Digital. The successful candidate will support clients with report builds (Google Data Studio / Google Sheets / Supermetrics), whilst
providing the agency and colleagues with day-to-day analytical support.
</p>
</div>
<div class="w-full mt-6 | xl:mt-0 xl:w-5/12 xl:text-right">
<button class="group inline-flex items-center outline-none focus:outline-none text-sm xs:text-base md:text-lg 2xl:text-xl">
Find out more
<span class="translate-z-0 relative overflow-hidden block border border-gray-300 rounded-full py-1.5 px-3 ml-2 mt-0.5 md:ml-3 md:py-2 md:px-4">
<svg class="relative z-10 w-5 fill-current | md:w-6 lg:w-8" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 15">
<path d="M29.565 7.029l-7.026 7.027-.79-.798 5.621-5.626a8.771 8.771 0 01-.014-.048c-.697-.002-1.394 0-2.091-.001H0V6.477h27.35l.022-.041-5.63-5.63.79-.806 7.033 7.029z"></path>
</svg>
<span class="absolute left-0 top-0 bg-emerald-400 transition-all w-full h-full transform -translate-x-full group-hover:translate-x-0 hidden | md:block"></span>
</span>
</button>
</div>
</div>
</div>
<div class="flex group flex-wrap justify-between py-8">
<div class="w-full sm:w-4/12">
<span class="block w-2.5 h-2.5 max-h-2.5 bg-emerald-400 rounded-full mr-2 sm:mr-3 sm:w-3.5 sm:h-3.5 sm:max-h-3.5"></span>
<h2 class="text-2xl xl:text-3xl font-medium text-gray-900 mt-3">
Web Development
</h2>
<p class="text-gray-500 sm:mt-2">
Full Time in Manchester
</p>
</div>
<div class="w-full pt-4 sm:pt-6 sm:w-8/12 sm:pl-5 xl:flex xl:flex-wrap xl:justify-between">
<div class="w-full xl:w-7/12">
<p class="text-base leading-loose">
We are looking for someone to join our Data & Analytics team here at This is Digital. The successful candidate will support clients with report builds (Google Data Studio / Google Sheets / Supermetrics), whilst
providing the agency and colleagues with day-to-day analytical support.
</p>
</div>
<div class="w-full mt-6 | xl:mt-0 xl:w-5/12 xl:text-right">
<button class="group inline-flex items-center outline-none focus:outline-none text-sm xs:text-base md:text-lg 2xl:text-xl">
Find out more
<span class="translate-z-0 relative overflow-hidden block border border-gray-300 rounded-full py-1.5 px-3 ml-2 mt-0.5 md:ml-3 md:py-2 md:px-4">
<svg class="relative z-10 w-5 fill-current | md:w-6 lg:w-8" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 15">
<path d="M29.565 7.029l-7.026 7.027-.79-.798 5.621-5.626a8.771 8.771 0 01-.014-.048c-.697-.002-1.394 0-2.091-.001H0V6.477h27.35l.022-.041-5.63-5.63.79-.806 7.033 7.029z"></path>
</svg>
<span class="absolute left-0 top-0 bg-emerald-400 transition-all w-full h-full transform -translate-x-full group-hover:translate-x-0 hidden | md:block"></span>
</span>
</button>
</div>
</div>
</div>
</div>Preview
Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Consecteturiure eius, corporis adipisci libero aperiam eos obcaecati. Officia, adipisci? Quidem tempora odio incidunt accusantium!!
Show Code
<div class="overflow-hidden bg-black max-w-full relative text-white py-24">
<svg aria-hidden="true" class="absolute inset-x-0 h-[1000px] w-full fill-[#171717] stroke-neutral-950/5 [mask-image:linear-gradient(to_bottom_left,white_40%,transparent_50%)]">
<rect width="100%" height="100%" fill="url(#:R1lda:)" stroke-width="0"></rect>
<svg x="50%" y="-96" stroke-width="0" class="overflow-visible">
<path transform="translate(64 160)" d="M45.119 4.5a11.5 11.5 0 0 0-11.277 9.245l-25.6 128C6.82 148.861 12.262 155.5 19.52 155.5h63.366a11.5 11.5 0 0 0 11.277-9.245l25.6-128c1.423-7.116-4.02-13.755-11.277-13.755H45.119Z"></path>
<path transform="translate(128 320)" d="M45.119 4.5a11.5 11.5 0 0 0-11.277 9.245l-25.6 128C6.82 148.861 12.262 155.5 19.52 155.5h63.366a11.5 11.5 0 0 0 11.277-9.245l25.6-128c1.423-7.116-4.02-13.755-11.277-13.755H45.119Z"></path>
<path transform="translate(288 480)" d="M45.119 4.5a11.5 11.5 0 0 0-11.277 9.245l-25.6 128C6.82 148.861 12.262 155.5 19.52 155.5h63.366a11.5 11.5 0 0 0 11.277-9.245l25.6-128c1.423-7.116-4.02-13.755-11.277-13.755H45.119Z"></path>
<path transform="translate(512 320)" d="M45.119 4.5a11.5 11.5 0 0 0-11.277 9.245l-25.6 128C6.82 148.861 12.262 155.5 19.52 155.5h63.366a11.5 11.5 0 0 0 11.277-9.245l25.6-128c1.423-7.116-4.02-13.755-11.277-13.755H45.119Z"></path>
<path transform="translate(544 640)" d="M45.119 4.5a11.5 11.5 0 0 0-11.277 9.245l-25.6 128C6.82 148.861 12.262 155.5 19.52 155.5h63.366a11.5 11.5 0 0 0 11.277-9.245l25.6-128c1.423-7.116-4.02-13.755-11.277-13.755H45.119Z"></path>
<path transform="translate(320 800)" d="M45.119 4.5a11.5 11.5 0 0 0-11.277 9.245l-25.6 128C6.82 148.861 12.262 155.5 19.52 155.5h63.366a11.5 11.5 0 0 0 11.277-9.245l25.6-128c1.423-7.116-4.02-13.755-11.277-13.755H45.119Z"></path>
<path
transform="translate(-672 0)"
d="M45.119 4.5a11.5 11.5 0 0 0-11.277 9.245l-25.6 128C6.82 148.861 12.262 155.5 19.52 155.5h63.366a11.5 11.5 0 0 0 11.277-9.245l25.6-128c1.423-7.116-4.02-13.755-11.277-13.755H45.119Z"
opacity="0.9982756840472575"
></path>
</svg>
<defs>
<pattern id=":R1lda:" width="96" height="480" x="50%" patternUnits="userSpaceOnUse" patternTransform="translate(0 -96)" fill="none">
<path
d="M128 0 98.572 147.138A16 16 0 0 1 82.883 160H13.117a16 16 0 0 0-15.69 12.862l-26.855 134.276A16 16 0 0 1-45.117 320H-116M64-160 34.572-12.862A16 16 0 0 1 18.883 0h-69.766a16 16 0 0 0-15.69 12.862l-26.855 134.276A16 16 0 0 1-109.117 160H-180M192 160l-29.428 147.138A15.999 15.999 0 0 1 146.883 320H77.117a16 16 0 0 0-15.69 12.862L34.573 467.138A16 16 0 0 1 18.883 480H-52M-136 480h58.883a16 16 0 0 0 15.69-12.862l26.855-134.276A16 16 0 0 1-18.883 320h69.766a16 16 0 0 0 15.69-12.862l26.855-134.276A16 16 0 0 1 109.117 160H192M-72 640h58.883a16 16 0 0 0 15.69-12.862l26.855-134.276A16 16 0 0 1 45.117 480h69.766a15.999 15.999 0 0 0 15.689-12.862l26.856-134.276A15.999 15.999 0 0 1 173.117 320H256M-200 320h58.883a15.999 15.999 0 0 0 15.689-12.862l26.856-134.276A16 16 0 0 1-82.883 160h69.766a16 16 0 0 0 15.69-12.862L29.427 12.862A16 16 0 0 1 45.117 0H128"
></path>
</pattern>
</defs>
</svg>
<div class="mx-auto relative px-6 w-full max-w-7xl lg:px-8">
<p class="leading-loose text-2xl max-w-3xl mx-auto text-center font-light">
Lorem ipsum dolor, sit amet consectetur
<span class="inline-flex h-12 w-24 align-middle mx-2 rounded-full overflow-hidden">
<img
class="object-cover"
alt="img-1"
src="https://designcools.com/wp-content/uploads/2024/10/This-is-digital-LOW-RES-21.webp"
/>
</span>
adipisicing elit. Consectetur
<span class="inline-flex h-12 w-24 align-middle mx-2 rounded-full overflow-hidden">
<img
class="object-cover"
alt="img-2"
src="https://designcools.com/wp-content/uploads/2024/10/This-is-digital-LOW-RES-21.webp"
/>
</span>
iure eius, corporis adipisci libero aperiam eos obcaecati. Officia, adipisci? Quidem tempora odio
<span class="inline-flex h-12 w-24 align-middle mx-2 rounded-full overflow-hidden">
<img
class="object-cover"
alt="img-3"
src="https://designcools.com/wp-content/uploads/2024/10/This-is-digital-LOW-RES-21.webp"
/>
</span>
incidunt accusantium!!
</p>
</div>
</div>Preview
Services
We use the power of design to solve complex problems and cultivate business solutions.
Organic Research
UI/UX Design
Optimize Development
Production Ready
Show Code
<div class="bg-[#EEEEEE] py-24">
<div class="max-w-7xl mx-auto px-4 xl:px-0">
<div class="flex flex-col sm:flex-row gap-y-4 by-12 justify-between gap-x-12 mb-[3rem]">
<div>
<h3 class="text-xl sm:text-3xl border inline-flex rounded-full uppercase border-black py-2 px-6 font-extrabold">Services</h3>
</div>
<p class="text-lg max-w-md">
We use the power of design to solve complex problems and cultivate business solutions.
</p>
</div>
<div class="border gap-y-3 sm:gap-y-0 border-gray-300 mt-6 md:w-[85%] xl:w-[70%] grid grid-cols-12 px-4 md:px-12 py-3 md:py-6 rounded-md sm:rounded-[12rem]">
<div class="col-span-12 sm:col-span-9 flex gap-4 sm:gap-6 items-center">
<label class="text-sm -rotate-45 sm:text-xl text-gray-500">[01]</label>
<h4 class="text-xl sm:text-3xl lg:text-4xl font-medium">
Organic Research
</h4>
</div>
<div class="col-span-12 sm:col-span-3 flex items-center justify-end aspect-video overflow-hidden">
<div class="md:h-[4.5rem] lg:h-[7rem]">
<img class="object-cover h-full rounded-md sm:rounded-[10rem]" src="https://designcools.com/wp-content/uploads/2024/10/1.jpg" alt="Organic Research" />
</div>
</div>
</div>
<div class="border md:ml-auto gap-y-3 sm:gap-y-0 border-gray-300 mt-6 md:w-[85%] xl:w-[70%] grid grid-cols-12 px-4 md:px-12 py-3 md:py-6 rounded-md sm:rounded-[12rem]">
<div class="col-span-12 sm:col-span-9 flex gap-4 sm:gap-6 items-center">
<label class="text-sm -rotate-45 sm:text-xl text-gray-500">[02]</label>
<h4 class="text-xl sm:text-3xl lg:text-4xl font-medium">
UI/UX Design
</h4>
</div>
<div class="col-span-12 sm:col-span-3 flex items-center justify-end aspect-video overflow-hidden">
<div class="md:h-[4.5rem] lg:h-[7rem]">
<img class="object-cover h-full rounded-md sm:rounded-[10rem]" src="https://designcools.com/wp-content/uploads/2024/10/1.jpg" alt="UI/UX Design" />
</div>
</div>
</div>
<div class="border gap-y-3 sm:gap-y-0 border-gray-300 mt-6 md:w-[85%] xl:w-[70%] grid grid-cols-12 px-4 md:px-12 py-3 md:py-6 rounded-md sm:rounded-[12rem]">
<div class="col-span-12 sm:col-span-9 flex gap-4 sm:gap-6 items-center">
<label class="text-sm -rotate-45 sm:text-xl text-gray-500">[03]</label>
<h4 class="text-xl sm:text-3xl lg:text-4xl font-medium">
Optimize Development
</h4>
</div>
<div class="col-span-12 sm:col-span-3 flex items-center justify-end aspect-video overflow-hidden">
<div class="md:h-[4.5rem] lg:h-[7rem]">
<img class="object-cover h-full rounded-md sm:rounded-[10rem]" src="https://designcools.com/wp-content/uploads/2024/10/1.jpg" alt="Optimize Development" />
</div>
</div>
</div>
<div class="border md:ml-auto gap-y-3 sm:gap-y-0 border-gray-300 mt-6 md:w-[85%] xl:w-[70%] grid grid-cols-12 px-4 md:px-12 py-3 md:py-6 rounded-md sm:rounded-[12rem]">
<div class="col-span-12 sm:col-span-9 flex gap-4 sm:gap-6 items-center">
<label class="text-sm -rotate-45 sm:text-xl text-gray-500">[04]</label>
<h4 class="text-xl sm:text-3xl lg:text-4xl font-medium">
Production Ready
</h4>
</div>
<div class="col-span-12 sm:col-span-3 flex items-center justify-end aspect-video overflow-hidden">
<div class="md:h-[4.5rem] lg:h-[7rem]">
<img class="object-cover h-full rounded-md sm:rounded-[10rem]" src="https://designcools.com/wp-content/uploads/2024/10/1.jpg" alt="Production Ready" />
</div>
</div>
</div>
</div>
</div>Preview
Shaping the digital horizon with superior creativity and precision
IQUBE is a 360 digital production house
100M+
Total number of client we have handled so far
Service:
- Assurance
- Range
- Battery
Products:
- Helmet
- Pumps
- Locks
- Helmet
- Pumps
- Locks
100+
Total number of Store in different cities.
Show Code
<div class="py-12 sm:py-24 bg-[#fafafa]">
<div class="max-w-7xl border-t border-gray-300 border-b mx-auto px-4 xl:px-0">
<div class="grid grid-cols-12 gap-6 border-gray-300 border-b">
<div class="col-span-12 sm:col-span-6 lg:col-span-9">
<div class="text-2xl sm:text-3xl xl:text-6xl py-6 md:py-12">
<h3 class="leading-[1.2] font-medium">Shaping the digital horizon with superior creativity and precision</h3>
</div>
</div>
<div class="col-span-12 sm:col-span-6 lg:col-span-3">
<div class="md:p-12 py-6 flex flex-col justify-start md:justify-center h-full">
<p class="text-[1rem]">
IQUBE is a 360 digital production house
</p>
<button aria-label="send now" class="bg-black mt-6 flex items-center justify-center inline-flex w-14 h-14 rounded-full text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" fill="currentColor" viewBox="0 0 256 256"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg>
</button>
</div>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-12 lg:grid-cols-4 border-b border-gray-300">
<div class="sm:col-span-6 lg:col-span-1 flex py-6 md:py-0 items-center justify-center">
<h4 class="text-6xl font-bold">100M+</h4>
</div>
<div class="sm:col-span-6 lg:col-span-1">
<p class="text-[1rem] p-6 sm:p-12 flex items-center h-full">
Total number of client we have handled so far
</p>
</div>
<div class="sm:col-span-6 lg:col-span-1">
<img class="w-full h-full" src="https://cloudfront-us-east-2.images.arcpublishing.com/reuters/2HWBR2E4EJMX5CFOF7XHZYRCN4.jpg" alt="timeline section design" />
</div>
<div class="sm:col-span-6 lg:col-span-1">
<div class="p-6 sm:p-12">
<h4 class="mb-2 font-medium">
Service:
</h4>
<ul class="text-[1rem]">
<li>Assurance</li>
<li>Range</li>
<li>Battery</li>
</ul>
</div>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-12 lg:grid-cols-4">
<div class="sm:col-span-6 lg:col-span-1">
<img class="w-full h-full" src="https://cloudfront-us-east-2.images.arcpublishing.com/reuters/2HWBR2E4EJMX5CFOF7XHZYRCN4.jpg" alt="timeline section design" />
</div>
<div class="sm:col-span-6 lg:col-span-1">
<div class="px-6 py-8 sm:px-12">
<h4 class="mb-4 font-medium">
Products:
</h4>
<div class="flex gap-x-16">
<ul class="text-[1rem]">
<li class="py-1">Helmet</li>
<li class="py-1">Pumps</li>
<li class="py-1">Locks</li>
</ul>
<ul class="text-[1rem]">
<li class="py-1">Helmet</li>
<li class="py-1">Pumps</li>
<li class="py-1">Locks</li>
</ul>
</div>
</div>
</div>
<div class="sm:col-span-6 lg:col-span-1 flex p-6 sm:p-12 items-center flex-col justify-center">
<h4 class="text-6xl mb-4 font-bold">100+</h4>
<p class="text-[1rem] text-center">
Total number of Store in different cities.
</p>
</div>
<div class="sm:col-span-6 lg:col-span-1">
<img class="w-full h-full" src="https://cloudfront-us-east-2.images.arcpublishing.com/reuters/2HWBR2E4EJMX5CFOF7XHZYRCN4.jpg" alt="information design" />
</div>
</div>
</div>
</div>Preview
Young people walking Starting as enthusiasts who wanted to make something truly great for other people, we combined our professional skills A discussion and empathy to create a unique Colleagues working collaborative environment
Show Code
<div class="relative bg-black overflow-hidden mb-12">
<div class="absolute bg-[#351beb] h-[40rem] w-[40rem] z-0 -right-[5rem] -top-[5rem] rounded-full blur-3xl"></div>
<div class="p-4 sm:p-12 lg:p-24 z-10 relative bg-[rgba(0,0,0,.41)]">
<p class="text-white text-[1.5rem] sm:text-[2rem] lg:text-[3.5rem] leading-loose lg:leading-relaxed xl:leading-normal font-medium">
Young people walking <img class="w-42 mx-3 inline-flex h-10 sm:h-16 object-cover rounded-full" src="https://designcools.com/wp-content/uploads/2024/10/1.jpg" alt="design components" />
Starting as enthusiasts who wanted to make something truly great for other people,
<img class="w-42 mx-3 inline-flex h-10 sm:h-16 object-cover rounded-full" src="https://designcools.com/wp-content/uploads/2024/10/1.jpg" alt="section design" />
we combined our professional skills A discussion
<img class="w-42 mx-3 inline-flex h-10 sm:h-16 object-cover rounded-full" src="https://designcools.com/wp-content/uploads/2024/10/1.jpg" alt="about section design" />
and empathy to create a unique Colleagues working collaborative environment
</p>
</div>
</div>
Preview
Awards
We use the power of design to solve complex problems and cultivate business solutions.
June 2024
Best UI/UX Design
June 2024
Best Photography
June 2024
Development
June 2024
Website Design
Show Code
<div class="py-16 sm:pb-12 max-w-7xl mx-auto px-4 xl:px-0">
<div class="flex flex-col sm:flex-row gap-y-4 w-full sm:pt-12 pb-12 justify-between gap-x-12">
<div>
<h3 class="text-3xl border uppercase inline-flex rounded-full border-black py-2 px-6 font-bold">Awards</h3>
</div>
<p class="max-w-md">We use the power of design to solve complex problems and cultivate business solutions.</p>
</div>
<div class="border-t grid grid-cols-12 gap-4 border-gray-300 py-6">
<div class="col-span-12 sm:col-span-2 flex items-center text-sm">
<div class="bg-black rotate-0 sm:-rotate-45 inline-flex font-medium px-3 py-2 rounded-md text-white">June 2024</div>
</div>
<div class="col-span-12 sm:col-span-7 lg:col-span-8">
<label class="text-2xl text-gray-500">Awwards</label>
<h4 class="text-2xl lg:text-3xl font-medium">Best UI/UX Design</h4>
</div>
<div class="col-span-12 sm:col-span-3 lg:col-span-2 sm:ml-auto overflow-hidden">
<div class="flex aspect-video justify-end h-[5rem]">
<img class="object-cover h-full rounded-[10rem]" src="https://designcools.com/wp-content/uploads/2024/10/1.jpg" alt="award section design" />
</div>
</div>
</div>
<div class="border-t grid grid-cols-12 gap-4 border-gray-300 py-6">
<div class="col-span-12 sm:col-span-2 flex items-center text-sm">
<div class="bg-black rotate-0 sm:-rotate-45 inline-flex font-medium px-3 py-2 rounded-md text-white">June 2024</div>
</div>
<div class="col-span-12 sm:col-span-7 lg:col-span-8">
<label class="text-2xl text-gray-500">Awwards</label>
<h4 class="text-2xl lg:text-3xl font-medium">Best Photography</h4>
</div>
<div class="col-span-12 sm:col-span-3 lg:col-span-2 sm:ml-auto overflow-hidden">
<div class="flex aspect-video justify-end h-[5rem]">
<img class="object-cover h-full rounded-[10rem]" src="https://designcools.com/wp-content/uploads/2024/10/1.jpg" alt="award section design" />
</div>
</div>
</div>
<div class="border-t grid grid-cols-12 gap-4 border-gray-300 py-6">
<div class="col-span-12 sm:col-span-2 flex items-center text-sm">
<div class="bg-black rotate-0 sm:-rotate-45 inline-flex font-medium px-3 py-2 rounded-md text-white">June 2024</div>
</div>
<div class="col-span-12 sm:col-span-7 lg:col-span-8">
<label class="text-2xl text-gray-500">Awwards</label>
<h4 class="text-2xl lg:text-3xl font-medium">Development</h4>
</div>
<div class="col-span-12 sm:col-span-3 lg:col-span-2 sm:ml-auto overflow-hidden">
<div class="flex aspect-video justify-end h-[5rem]">
<img class="object-cover h-full rounded-[10rem]" src="https://designcools.com/wp-content/uploads/2024/10/1.jpg" alt="award section design" />
</div>
</div>
</div>
<div class="border-t grid grid-cols-12 gap-4 border-gray-300 py-6">
<div class="col-span-12 sm:col-span-2 flex items-center text-sm">
<div class="bg-black rotate-0 sm:-rotate-45 inline-flex font-medium px-3 py-2 rounded-md text-white">June 2024</div>
</div>
<div class="col-span-12 sm:col-span-7 lg:col-span-8">
<label class="text-2xl text-gray-500">Awwards</label>
<h4 class="text-2xl lg:text-3xl font-medium">Website Design</h4>
</div>
<div class="col-span-12 sm:col-span-3 lg:col-span-2 sm:ml-auto overflow-hidden">
<div class="flex aspect-video justify-end h-[5rem]">
<img class="object-cover h-full rounded-[10rem]" src="https://designcools.com/wp-content/uploads/2024/10/1.jpg" alt="award section design" />
</div>
</div>
</div>
</div>Preview
Our culture – Balance your passion with your passion for life.
We are a group of like-minded people who share the same core values.
- Loyalty : Our team has been with us since the beginning because none of them are allowed to have LinkedIn profiles.
- Trust : We don’t care when our team works just as long as they are working every waking second.
- Compassion : You never know what someone is going through at home and we make sure to never find out.
Show Code
<div class="rounded-3xl bg-neutral-950 py-24 mb-24 lg:py-32">
<div class="mx-auto max-w-7xl px-4 sm:px-12 lg:px-8 xl:px-16">
<div class="mx-auto mb-20 max-w-2xl lg:max-w-none">
<div class="max-w-2xl">
<h2>
<span class="mb-6 block font-display text-xl font-semibold text-white">
Our culture
</span>
<span class="sr-only"> - </span>
<span class="block font-display tracking-tight [text-wrap:balance] text-4xl font-medium sm:text-4xl text-white">
Balance your passion with your passion for life.
</span>
</h2>
<div class="mt-2 text-xl text-neutral-300">
<p class="leading-relaxed">
We are a group of like-minded people who share the same core values.
</p>
</div>
</div>
</div>
<div>
<ul role="list" class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
<li class="text-lg text-neutral-300 before:bg-white after:bg-white/10">
<div>
<div class="pl-8 relative before:absolute after:absolute before:bg-white after:bg-white/10 before:left-0 before:top-0 before:h-6 before:w-px after:bottom-0 after:left-0 after:top-8 after:w-px">
<strong class="font-semibold text-white">
Loyalty :
</strong>
Our team has been with us since the beginning because none of them are allowed to have LinkedIn profiles.
</div>
</div>
</li>
<li class="text-lg text-neutral-300 before:bg-white after:bg-white/10">
<div>
<div class="pl-8 relative before:absolute after:absolute before:bg-white after:bg-white/10 before:left-0 before:top-0 before:h-6 before:w-px after:bottom-0 after:left-0 after:top-8 after:w-px">
<strong class="font-semibold text-white">
Trust :
</strong>
We don’t care when our team works just as long as they are working every waking second.
</div>
</div>
</li>
<li class="text-lg text-neutral-300 before:bg-white after:bg-white/10">
<div>
<div class="pl-8 relative before:absolute after:absolute before:bg-white after:bg-white/10 before:left-0 before:top-0 before:h-6 before:w-px after:bottom-0 after:left-0 after:top-8 after:w-px">
<strong class="font-semibold text-white">
Compassion :
</strong>
You never know what someone is going through at home and we make sure to never find out.
</div>
</div>
</li>
</ul>
</div>
</div>
</div>900+ Tailwind UI Components
Stay in the loop with everything you need to know.