Developer-Friendly Tailwind General Components

Footer Columns

<footer class="mt-8 py-8 bg-gray-50 w-full">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
            <div>
                <h5 class="font-bold mb-2">Information</h5>
                <ul class="list-none space-y-1">
                    <li><a href="two-column.html" class="text-gray-600 hover:text-gray-900">About Us</a></li>
                    <li><a href="typography.html" class="text-gray-600 hover:text-gray-900">Delivery Information</a></li>
                    <li><a href="typography.html" class="text-gray-600 hover:text-gray-900">Privacy Policy</a></li>
                    <li><a href="typography.html" class="text-gray-600 hover:text-gray-900">Terms &amp; Conditions</a></li>
                </ul>
            </div>
            <div>
                <h5 class="font-bold mb-2">Customer Service</h5>
                <ul class="list-none space-y-1">
                    <li><a href="contact.html" class="text-gray-600 hover:text-gray-900">Contact Us</a></li>
                    <li><a href="typography.html" class="text-gray-600 hover:text-gray-900">Returns</a></li>
                    <li><a href="typography.html" class="text-gray-600 hover:text-gray-900">Site Map</a></li>
                </ul>
            </div>
            <div>
                <h5 class="font-bold mb-2">Extras</h5>
                <ul class="list-none space-y-1">
                    <li><a href="typography.html" class="text-gray-600 hover:text-gray-900">Brands</a></li>
                    <li><a href="typography.html" class="text-gray-600 hover:text-gray-900">Gift Vouchers</a></li>
                    <li><a href="typography.html" class="text-gray-600 hover:text-gray-900">Affiliates</a></li>
                    <li><a href="typography.html" class="text-gray-600 hover:text-gray-900">Specials</a></li>
                </ul>
            </div>
            <div>
                <h5 class="font-bold mb-2">My Account</h5>
                <ul class="list-none space-y-1">
                    <li><a href="my_account.html" class="text-gray-600 hover:text-gray-900">My Account</a></li>
                    <li><a href="typography.html" class="text-gray-600 hover:text-gray-900">Order History</a></li>
                    <li><a href="typography.html" class="text-gray-600 hover:text-gray-900">Wish List</a></li>
                    <li><a href="typography.html" class="text-gray-600 hover:text-gray-900">Newsletter</a></li>
                </ul>
            </div>
        </div>

<div class="mt-5 text-center">
            <a href="#" class="inline-block mt-3 text-gray-400 text-3xl "><i class="fa-brands fa-cc-visa"></i></a>
            <a href="#" class="inline-block mt-3 text-gray-400 text-3xl "><i class="fa-brands fa-cc-mastercard"></i></a>
            <a href="#" class="inline-block mt-3 text-gray-400 text-3xl "><i class="fa-brands fa-cc-stripe"></i></a>
            <a href="#" class="inline-block mt-3 text-gray-400 text-3xl "><i class="fa-brands fa-cc-paypal"></i></a>
            <a href="#" class="inline-block mt-3 text-gray-400 text-3xl "><i class="fa-brands fa-cc-apple-pay"></i></a>
            <p class="text-gray-500 mt-3">tailwindcart. © 2024</p>
        </div>
    </div>
</footer>

<js-component src="footer/columns"></js-component>

Newsletter Signup

View

<js-component src="general/newsletter_signup"></js-component>

Site Footer

View

<footer class="w-full bg-gray-100 py-6">  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">    <div class="flex justify-between items-center flex-col md:flex-row">      <div class="mb-4 md:mb-0">        <p class="text-black text-sm">&copy; 2023 Your Company. All rights reserved.</p>      </div>      <nav class="mb-4 md:mb-0">        <ul class="flex space-x-4">          <li><a href="#" class="text-black hover:underline">Home</a></li>          <li><a href="#" class="text-black hover:underline">About Us</a></li>          <li><a href="#" class="text-black hover:underline">Services</a></li>          <li><a href="#" class="text-black hover:underline">Contact</a></li>        </ul>      </nav>      <div class="flex space-x-4">        <a href="#" aria-label="Facebook" class="text-black hover:underline">          <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" class="w-5 h-5">            <path d="M22.675 0h-21.35c-.733 0-1.325.592-1.325 1.325v21.351c0 .732.592 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.672c0-3.1 1.894-4.788 4.659-4.788 1.325 0 2.463.099 2.795.144v3.24l-1.918.001c-1.504 0-1.794.715-1.794 1.763v2.311h3.588l-.467 3.622h-3.121v9.293h6.116c.732 0 1.324-.592 1.324-1.325v-21.35c0-.733-.592-1.325-1.324-1.325z"/>          </svg>        </a>        <a href="#" aria-label="Twitter" class="text-black hover:underline">          <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" class="w-5 h-5">            <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.723-.951.563-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 3.065-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.106 1.523 6.574-.806-.026-1.566-.247-2.229-.616v.061c0 2.29 1.631 4.198 3.794 4.63-.397.107-.815.165-1.248.165-.305 0-.601-.03-.888-.086.601 1.875 2.349 3.238 4.419 3.274-2.028 1.588-4.576 2.255-7.29 1.946 2.179 1.396 4.768 2.212 7.548 2.212 9.054 0 14-7.496 14-13.986 0-.21-.004-.423-.014-.633.961-.695 1.797-1.562 2.457-2.549z"/>          </svg>        </a>        <a href="#" aria-label="LinkedIn" class="text-black hover:underline">          <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" class="w-5 h-5">            <path d="M22.23 0h-20.46c-.974 0-1.77.797-1.77 1.77v20.459c0 .974.797 1.771 1.77 1.771h20.459c.973 0 1.771-.797 1.771-1.77v-20.46c0-.973-.798-1.77-1.771-1.77zm-15.538 20.452h-3.077v-10.17h3.077v10.17zm-1.538-11.633c-.985 0-1.784-.799-1.784-1.784 0-.984.799-1.785 1.784-1.785.985 0 1.784.8 1.784 1.785 0 .985-.8 1.784-1.784 1.784zm13.846 11.633h-3.077v-5.539c0-1.321-.027-3.015-1.838-3.015-1.839 0-2.12 1.435-2.12 2.917v5.637h-3.077v-10.17h2.951v1.391h.042c.41-.776 1.413-1.595 2.911-1.595 3.111 0 3.686 2.047 3.686 4.711v5.663z"/>          </svg>        </a>      </div>    </div>  </div></footer>

<js-component src="general/site_footer"></js-component>