Feature 2 TailwindCSS
Feature block to highlight features of your product, web application or mobile application or any SaaS (Software-as-a-Service) application.
Dependencies
- Tailwind CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>FWR Tailwind CSS Blocks - Feature 2</title>
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css">
<!-- Custom style -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="feature-2 bg-indigo-100 py-6 md:py-12">
<div class="container px-4 mx-auto md:py-6 xl:py-12">
<div class="md:flex md:justify-center">
<div class="md:w-10/12 xl:w-8/12 md:pb-6 text-center">
<h1 class="text-3xl md:text-4xl font-medium mb-4 md:mb-6">Create your awesome website</h1>
<p>We have crafted FWR Blocks with an aim to provide designers, developers and agencies a perfect tool for creating their websites quickly and easily.</p>
</div>
</div>
<div class="md:flex md:flex-wrap md:-mx-4 mt-6 md:mt-12">
<div class="md:px-4 md:w-1/3 mt-6 md:mt-0">
<div class="feature-card max-w-sm mx-auto bg-white overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300 md:h-full">
<img src="//assets.free-website-resources.com/img/feature-1.jpg" alt="feature image" class="">
<div class="p-6 md:py-12 text-center">
<h3 class="text-xl font-medium text-indigo-600 mb-4">Crafted with perfection</h3>
<p>FWR blocks are carefully created with perfection at its core.</p>
</div>
</div>
</div>
<div class="md:px-4 md:w-1/3 mt-6 md:mt-0">
<div class="feature-card max-w-sm mx-auto bg-white overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300 md:h-full">
<img src="//assets.free-website-resources.com/img/feature-2.jpg" alt="feature image" class="">
<div class="p-6 md:py-12 text-center">
<h3 class="text-xl font-medium text-indigo-600 mb-4">Beauty in Design</h3>
<p>FWR blocks are well-designed. Your website will always look fresh and awesome.</p>
</div>
</div>
</div>
<div class="md:px-4 md:w-1/3 mt-6 md:mt-0">
<div class="feature-card max-w-sm mx-auto bg-white overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300 md:h-full">
<img src="//assets.free-website-resources.com/img/feature-3.jpg" alt="feature image" class="">
<div class="p-6 md:py-12 text-center">
<h3 class="text-xl font-medium text-indigo-600 mb-4">Plug and Play</h3>
<p>FWR blocks are carefully created with perfection at its core.</p>
</div>
</div>
</div>
</div>
<div class="feature-action text-center mt-6 md:mt-12 xl:pt-4">
<button class="bg-indigo-600 hover:bg-indigo-700 text-white text-xl py-3 px-6 md:px-12 rounded transition-colors duration-300">Get started</button>
</div>
</div>
</div>
<!-- /.feature-2 -->
<!-- Scripts -->
</body>
</html>
// Custom CSS
.feature-card {
border-radius: 1rem;
}
.feature-card {
border-radius: 1rem;
}
