Developer-Friendly Tailwind Marketing Components - JAMstackers

jamstackers.

Sign in with GitHub

Latest Tailwind Components

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

Background Patterns

View

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

Placeholder Image

Icon Set

View

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

Placeholder Image

Image Gallery

View

<div class="container mx-auto p-4">
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <div class="relative">
            <img src="https://placehold.co/600x400" alt="Image 1" class="w-full h-auto rounded-lg">
            <button class="absolute top-2 right-2 bg-white p-1 rounded-full hover:bg-gray-200 focus:outline-none focus:bg-gray-300">✕</button>
        </div>
        <div class="relative">
            <img src="https://placehold.co/600x400" alt="Image 2" class="w-full h-auto rounded-lg">
            <button class="absolute top-2 right-2 bg-white p-1 rounded-full hover:bg-gray-200 focus:outline-none focus:bg-gray-300">✕</button>
        </div>
        <div class="relative">
            <img src="https://placehold.co/600x400" alt="Image 3" class="w-full h-auto rounded-lg">
            <button class="absolute top-2 right-2 bg-white p-1 rounded-full hover:bg-gray-200 focus:outline-none focus:bg-gray-300">✕</button>
        </div>
        <div class="relative">
            <img src="https://placehold.co/600x400" alt="Image 4" class="w-full h-auto rounded-lg">
            <button class="absolute top-2 right-2 bg-white p-1 rounded-full hover:bg-gray-200 focus:outline-none focus:bg-gray-300">✕</button>
        </div>
    </div>
</div>

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

Placeholder Image