Categories
HTML and Tailwind CSS Features / Services code Snippet
This HTML and Tailwind CSS code snippet represents a services/feature component designed to showcase key features of a product or service. The component features a visually appealing layout with a grid structure, presenting each feature in a distinct card-like format. Each feature card consists of an icon accompanied by a title and a brief description, all neatly organized within a responsive grid layout. The use of FontAwesome icons enhances the visual presentation, while Tailwind CSS classes ensure consistent spacing, typography, and color scheme throughout the component. Overall, this services/feature tailwindcss component effectively communicates the essential features of the product or service in a clear and concise manner, facilitating user understanding and engagement.
<section>
<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-3xl md:leading-normal text-2xl leading-normal font-semibold"
>
Key Features
</h3>
<p class="text-slate-400 max-w-xl mx-auto">
Start mining cryptocurrency effortlessly with our mobile app designed
to simplify your crypto mining experience.
</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 flex duration-500 xl:p-3">
<div
class="flex md:order-2 order-1 align-middle justify-center items-center w-14 h-14 mt-1 bg-yellow-600/5 group-hover:bg-yellow-600 group-hover:text-white text-yellow-600 rounded-full text-2xl shadow-sm duration-500"
>
<i class="fas fa-mobile-alt w-5 h-5"></i>
</div>
<div
class="flex-1 md:order-1 order-2 md:text-end md:me-4 md:ms-0 ms-4"
>
<h4 class="mb-0 text-lg font-medium">Mining On the Go</h4>
<p class="text-slate-400 mt-3">
Start mining cryptocurrency anywhere, anytime with our mobile
app.
</p>
</div>
</div>
<!--end feature-->
<div class="group flex duration-500 xl:p-3">
<div
class="flex md:order-2 order-1 align-middle justify-center items-center w-14 h-14 mt-1 bg-yellow-600/5 group-hover:bg-yellow-600 group-hover:text-white text-yellow-600 rounded-full text-2xl shadow-sm duration-500"
>
<i class="fas fa-chart-line w-5 h-5"></i>
</div>
<div
class="flex-1 md:order-1 order-2 md:text-end md:me-4 md:ms-0 ms-4"
>
<h4 class="mb-0 text-lg font-medium">Real-Time Analytics</h4>
<p class="text-slate-400 mt-3">
Track your mining progress with real-time analytics and
insights.
</p>
</div>
</div>
<!--end feature-->
<div class="group flex duration-500 xl:p-3">
<div
class="flex md:order-2 order-1 align-middle justify-center items-center w-14 h-14 mt-1 bg-yellow-600/5 group-hover:bg-yellow-600 group-hover:text-white text-yellow-600 rounded-full text-2xl shadow-sm duration-500"
>
<i class="fas fa-shield-alt w-5 h-5"></i>
</div>
<div
class="flex-1 md:order-1 order-2 md:text-end md:me-4 md:ms-0 ms-4"
>
<h4 class="mb-0 text-lg font-medium">Security Measures</h4>
<p class="text-slate-400 mt-3">
Our app ensures the security of your mining operations with
advanced encryption.
</p>
</div>
</div>
<!--end feature-->
</div>
</div>
<div class="lg:col-span-4 md:col-span-12 lg:mx-8 lg:order-2 order-1">
<img
src="https://res.cloudinary.com/djunzsydj/image/upload/v1711348620/tailwind%20snippets/reallygreatsite.com_2_vrias5.png"
class="mx-auto md:max-w-[300px]"
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 flex duration-500 xl:p-3">
<div
class="flex align-middle justify-center items-center w-14 h-14 mt-1 bg-yellow-600/5 group-hover:bg-yellow-600 group-hover:text-white text-yellow-600 rounded-full text-2xl shadow-sm duration-500"
>
<i class="fas fa-coins w-5 h-5"></i>
</div>
<div class="flex-1 ms-4">
<h4 class="mb-0 text-lg font-medium">
Multiple Cryptocurrencies
</h4>
<p class="text-slate-400 mt-3">
Our app supports mining for various cryptocurrencies, giving
you flexibility.
</p>
</div>
</div>
<!--end feature-->
<div class="group flex duration-500 xl:p-3">
<div
class="flex align-middle justify-center items-center w-14 h-14 mt-1 bg-yellow-600/5 group-hover:bg-yellow-600 group-hover:text-white text-yellow-600 rounded-full text-2xl shadow-sm duration-500"
>
<i class="fas fa-wifi w-5 h-5"></i>
</div>
<div class="flex-1 ms-4">
<h4 class="mb-0 text-lg font-medium">Seamless Connectivity</h4>
<p class="text-slate-400 mt-3">
Stay connected to mining pools and networks seamlessly with
our app.
</p>
</div>
</div>
<!--end feature-->
<div class="group flex duration-500 xl:p-3">
<div
class="flex align-middle justify-center items-center w-14 h-14 mt-1 bg-yellow-600/5 group-hover:bg-yellow-600 group-hover:text-white text-yellow-600 rounded-full text-2xl shadow-sm duration-500"
>
<i class="fas fa-lock w-5 h-5"></i>
</div>
<div class="flex-1 ms-4">
<h4 class="mb-0 text-lg font-medium">Wallet Integration</h4>
<p class="text-slate-400 mt-3">
Integrate your cryptocurrency wallet seamlessly with our app
for easy transactions.
</p>
</div>
</div>
<!--end feature-->
</div>
</div>
</div>
<!--end grid-->
</div>
</section>
<!--end container-->