Developer-Friendly Tailwind Marketing Components - JAMstackers

jamstackers.

Sign in with GitHub

Latest Tailwind Components

Responsive HTML building blocks for marketing, applications, dashboards and more.

Contact Information

View

<js-component src="marketing/contact_information"></js-component>

Placeholder Image

Social Media Links

View

<footer class="w-full bg-gray-100 py-6">
    <div class="max-w-6xl mx-auto flex justify-center space-x-6">
        <a href="https://facebook.com" target="_blank" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-600 hover:bg-blue-700">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-white w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M18 2.25V7.5h-1.8c-.682 0-1.2.518-1.2 1.8V12h3l-.3 3H15v9h-3v-9H9V12h3V9.3c0-2.173 1.627-3.822 3.678-3.99L18 5.25V2.25z" />
            </svg>
        </a>
        <a href="https://twitter.com" target="_blank" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-400 hover:bg-blue-500">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-white w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.29 20.251c7.547 0 11.675-6.155 11.675-11.675 0-.177 0-.355-.012-.532A8.348 8.348 0 0022 5.923a8.208 8.208 0 01-2.357.646 4.107 4.107 0 001.804-2.271 8.223 8.223 0 01-2.606.996 4.097 4.097 0 00-6.987 3.736A11.62 11.62 0 013 4.536a4.097 4.097 0 001.27 5.471 4.073 4.073 0 01-1.858-.513v.052a4.096 4.096 0 003.283 4.014 4.092 4.092 0 01-1.853.07 4.098 4.098 0 003.834 2.853A8.228 8.228 0 012 18.407a11.616 11.616 0 006.29 1.844" />
            </svg>
        </a>
        <a href="https://instagram.com" target="_blank" class="flex items-center justify-center w-10 h-10 rounded-full bg-pink-600 hover:bg-pink-700">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-white w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 3.25A4.255 4.255 0 003.25 7.5v9a4.255 4.255 0 004.25 4.25h9a4.255 4.255 0 004.25-4.25v-9A4.255 4.255 0 0016.5 3.25h-9zm10.25 0a1.75 1.75 0 100 3.5 1.75 1.75 0 000-3.5zm-5.75 3.5a5.25 5.25 0 110 10.5 5.25 5.25 0 010-10.5zm0 1.5a3.75 3.75 0 000 7.5 3.75 3.75 0 000-7.5z" />
            </svg>
        </a>
        <a href="https://linkedin.com" target="_blank" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 hover:bg-blue-600">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-white w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M16.75 2.25h-9.5a5 5 0 00-5 5v9.5a5 5 0 005 5h9.5a5 5 0 005-5v-9.5a5 5 0 00-5-5zm-6.042 14.5H8V10.5h2.708v6.25zM8.5 9a1.25 1.25 0 110-2.5 1.25 1.25 0 010 2.5zm7.792 8.25h-2.708V13.5c0-.828-.672-1.5-1.5-1.5s-1.5.672-1.5 1.5v3.75H10v-6h2.084V11.09c.438-.682 1.228-1.09 2.041-1.09 1.353 0 2.375 1.022 2.375 2.375v4.875z" />
            </svg>
        </a>
    </div>
</footer>

<js-component src="marketing/social_media_links"></js-component>

Placeholder Image

Footer

View

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

Placeholder Image