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;
}

Similar Blocks

aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvdGFpbHdpbmRjc3MvZmVhdHVyZS9mZWF0dXJlLTI=