Categories
Html And Tailwind CSS Burger Joint Services Code Snippet
This Html And Tailwind CSS code snippet represents a services section of a website dedicated to a burger joint. It features a visually appealing layout with three columns showcasing different burger-related services component. Each column contains an icon representing a specific service or feature, along with a title and a brief description. The icons are styled using Font Awesome and are placed within circular containers with a shadow effect. The layout is responsive, ensuring optimal viewing across different devices. Overall, this Services section component effectively highlights the key offerings of the burger joint in a visually appealing and informative manner.
<!-- Start -->
<section class="relative">
<div class="sm:p-4 lg:p-11 xl:p-20 2xl:p-52 relative">
<div class="grid grid-cols-1 pb-8 text-center">
<h3
class="mb-4 md:text-4xl md:leading-normal text-3xl leading-normal font-head-ebgaramond font-medium"
>
Our Services
</h3>
<p class="text-slate-400 max-w-xl mx-auto">
Every bun is a performance of thoroughly grilled patties through the
finest ingredients and delicious toppings.
</p>
</div>
<!--end grid-->
<div
class="grid lg:grid-cols-12 md:grid-cols-12 grid-cols-1 mt-8 gap-[30px] items-center"
>
<div class="lg:col-span-4 md:col-span-6 lg:order-1 order-2">
<div class="grid grid-cols-1 gap-[30px]">
<div
class="group duration-500 md:text-end text-start flex flex-col items-end"
>
<div
class="flex items-center justify-center w-16 h-16 p-3 rounded-full shadow-md dark:shadow-gray-800 bg-white"
>
<i class="fas fa-hamburger text-orange-600 text-2xl"></i>
</div>
<div class="mt-2 md:order-1 order-2">
<a
href=""
class="text-xl font-semibold font-head-ebgaramond hover:text-orange-600"
>Delicious Burgers</a
>
<p class="text-slate-400 mt-3">
Enjoy our high-quality burgers made with fresh ingredients.
</p>
</div>
</div>
<!--end feature-->
<div
class="group duration-500 md:text-end text-start flex flex-col items-end"
>
<div
class="flex items-center justify-center w-16 h-16 p-3 rounded-full shadow-md dark:shadow-gray-800 bg-white"
>
<i class="fas fa-pizza-slice text-orange-600 text-2xl"></i>
</div>
<div class="mt-2 md:order-1 order-2">
<a
href=""
class="text-xl font-semibold text-[#2e2e2e] font-head-ebgaramond hover:text-orange-600"
>Crunchy Pizza</a
>
<p class="text-slate-400 mt-3">
Try our delicious Pizza, crispy on the outside and fluffy on
the inside.
</p>
</div>
</div>
<!--end feature-->
<div
class="group duration-500 md:text-end text-start flex flex-col items-end"
>
<div
class="flex items-center justify-center w-16 h-16 p-3 rounded-full shadow-md dark:shadow-gray-800 bg-white"
>
<i class="fas fa-glass-cheers text-orange-600 text-2xl"></i>
</div>
<div class="mt-2 md:order-1 order-2">
<a
href=""
class="text-xl font-semibold font-head-ebgaramond hover:text-orange-600"
>Refreshing Drinks</a
>
<p class="text-slate-400 mt-3">
Quench your thirst with our wide selection of refreshing
drinks.
</p>
</div>
</div>
<!--end feature-->
</div>
</div>
<div class="lg:col-span-4 md:col-span-12 lg:order-2 order-1">
<img
src="https://res.cloudinary.com/djunzsydj/image/upload/v1711355964/tailwind%20snippets/Online_Food_Delivery_Instagram_Post_rro7nq.png"
class="lg:w-auto md:w-80 mx-auto"
alt=""
/>
</div>
<div class="lg:col-span-4 md:col-span-6 order-3">
<div class="grid grid-cols-1 gap-[30px]">
<div class="group duration-500">
<div
class="flex items-center justify-center w-16 h-16 p-3 rounded-full shadow-md dark:shadow-gray-800 bg-white"
>
<i class="fas fa-bread-slice text-orange-600 text-2xl"></i>
</div>
<div class="mt-2">
<a
href=""
class="text-xl font-semibold font-head-ebgaramond hover:text-orange-600"
>The Perfect Bun</a
>
<p class="text-slate-400 mt-3">
Indulge in our perfectly crafted burger buns.
</p>
</div>
</div>
<!--end feature-->
<div class="group duration-500">
<div
class="flex items-center justify-center w-16 h-16 p-3 rounded-full shadow-md dark:shadow-gray-800 bg-white"
>
<i class="fas fa-walking text-orange-600 text-2xl"></i>
</div>
<div class="mt-2">
<a
href=""
class="text-xl font-semibold font-head-ebgaramond hover:text-orange-600"
>Burgers on the Go</a
>
<p class="text-slate-400 mt-3">
Take your favorite burgers with you wherever you go.
</p>
</div>
</div>
<!--end feature-->
<div class="group duration-500">
<div
class="flex items-center justify-center w-16 h-16 p-3 rounded-full shadow-md dark:shadow-gray-800 bg-white"
>
<i class="fas fa-hamburger text-orange-600 text-2xl"></i>
</div>
<div class="mt-2">
<a
href=""
class="text-xl font-semibold font-head-ebgaramond hover:text-orange-600"
>Burger Machine</a
>
<p class="text-slate-400 mt-3">
Discover the magic behind our burger-making machine.
</p>
</div>
</div>
<!--end feature-->
</div>
</div>
</div>
<!--end grid-->
</div>
<!--end container-->
</section>
<!--ens section-->
<!-- End -->