logomedCode
Back to templates

Featured-Section

Free Featured Section Components using Tailwind-CSS

Explore our free featured section components crafted with Tailwind CSS. Enhance your website with stylish and responsive designs. Get started now!

Full Screen
Free Featured Section Components using Tailwind-CSS

code source

 <section>
      <div class="px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
        <div class="grid grid-cols-3 gap-4 md:block">
          <div class="block text-center rounded bg-gray-100 p-6 sm:p-8 mb-4">
            <div class="mx-auto max-w-md text-center lg:text-left">
              <header>
                <h2 class="text-xl font-bold text-gray-900 sm:text-3xl">
                  Watches
                </h2>

                <p class="mt-4 text-gray-500">
                  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas
                  rerum quam amet provident nulla error!
                </p>
              </header>

              <a
                href="#"
                class="mt-8 inline-block rounded border border-gray-900 bg-gray-900 px-12 py-3 text-sm font-medium text-white transition hover:shadow focus:outline-none focus:ring"
              >
                Shop All
              </a>
            </div>
          </div>

          <div class="col-span-2">
            <ul class="grid grid-cols-2 gap-4 md:flex">
              <li>
                <a href="#" class="group block">
                  <img
                    src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1598&q=80"
                    alt=""
                    class="aspect-square w-full rounded object-cover"
                  />

                  <div class="mt-3">
                    <h3 class="font-medium text-gray-900 group-hover:underline group-hover:underline-offset-4">
                      Simple Watch
                    </h3>

                    <p class="mt-1 text-sm text-gray-700">$150</p>
                  </div>
                </a>
              </li>

              <li>
                <a href="#" class="group block">
                  <img
                    src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1598&q=80"
                    alt=""
                    class="aspect-square w-full rounded object-cover"
                  />

                  <div class="mt-3">
                    <h3 class="font-medium text-gray-900 group-hover:underline group-hover:underline-offset-4">
                      Simple Watch
                    </h3>

                    <p class="mt-1 text-sm text-gray-700">$150</p>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

Recent Templates:

This website uses cookies to enhance your browsing experience, analyze site traffic, and serve better user experiences. By continuing to use this site, you consent to our use of cookies. Learn more in our cookie policy

Explore the latest insights, articles,free components, and expert advice on programming and software development

© Copyright 2024 MED DAKIR. All rights reserved./privacy policy