Home
Freja Jensen
Tweets showcase grid

Tweets showcase grid

Responsive tweets showcase grid

This tailwind example is contributed by Freja Jensen, on 25-Jan-2023. Component is made with Tailwind CSS v3. It is responsive.

Grid

Author Freja Jensen

9.7k

Fork Fullscreen

<div class="container mx-auto max-w-6xl p-4">
    <h3 class="text-gray-800 py-6 text-3xl text-center font-bold">Popular Tweets</h3>
    <div class="md:columns-2 lg:columns-3 gap-6 p-4 sm:p-1 mt-2">

<div class="animate-in zoom-in duration-200">
            <div
                class="ring-1 rounded-lg flex flex-col space-y-2 p-4 break-inside-avoid mb-6 bg-white hover:ring-2 ring-gray-300 hover:ring-sky-400 transform duration-200 hover:shadow-sky-200 hover:shadow-md z-0 relative">
                <div class="flex flex-col break-inside-avoid-page z-0 relative">
                    <div class="flex justify-between">
                        <div class="flex space-x-6">
                            <div class="flex space-x-4 flex-shrink-0 w-52">
                                <img src="https://randomuser.me/api/portraits/men/51.jpg"
                                    class="w-10 h-10 rounded-full">
                                <div>
                                    <div class="font-semibold">
                                        Salvador Rose
                                    </div>
                                    <div class="text-sm">
                                        @Salvador
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

<a href="#" target="_blank" class="whitespace-pre-line break-inside-avoid-page">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                        laboris nisi ut aliquip ex ea commodo consequat.
                    </a>
                </div>
            </div>
        </div>

<a href="@" target="_blank" class="whitespace-pre-line break-inside-avoid-page">
                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                            ut labore et dolore magna aliqua.</span>
                    </a>
                </div>
            </div>
        </div>

<div class="animate-in zoom-in duration-200">
            <div
                class="ring-1 rounded-lg flex flex-col space-y-2 p-4 break-inside-avoid mb-6 bg-white hover:ring-2 ring-gray-300 hover:ring-sky-400 transform duration-200 hover:shadow-sky-200 hover:shadow-md z-0 relative">
                <div class="flex flex-col break-inside-avoid-page z-0 relative">
                    <div class="flex justify-between">
                        <div class="flex space-x-6">
                            <div class="flex space-x-4 flex-shrink-0 w-52">
                                <img src="https://randomuser.me/api/portraits/men/78.jpg"
                                    class="w-10 h-10 rounded-full">
                                <div>
                                    <div class="font-semibold">
                                        Mike tyson
                                    </div>
                                    <div class="text-sm">
                                        @mike
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

<a href="" target="_blank" class="whitespace-pre-line break-inside-avoid-page">
                        <span>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua.
                        </span>
                    </a>
                </div>
            </div>
        </div>

<a href="#" target="_blank" class="whitespace-pre-line break-inside-avoid-page">
                        <span>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                            laboris nisi ut aliquip ex ea commodo consequat.
                        </span>
                    </a>
                </div>
            </div>
        </div>

<div class="animate-in zoom-in duration-200">
            <div
                class="ring-1 rounded-lg flex flex-col space-y-2 p-4 break-inside-avoid mb-6 bg-white hover:ring-2 ring-gray-300 hover:ring-sky-400 transform duration-200 hover:shadow-sky-200 hover:shadow-md z-0 relative">
                <div class="flex flex-col break-inside-avoid-page z-0 relative">
                    <div class="flex justify-between">
                        <div class="flex space-x-6">
                            <div class="flex space-x-4 flex-shrink-0 w-52">
                                <img src="https://randomuser.me/api/portraits/men/34.jpg"
                                    class="w-10 h-10 rounded-full">
                                <div>
                                    <div class="font-semibold">
                                        Cheung
                                    </div>
                                    <div class="text-sm">
                                        @Cheung
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

<a href="" target="_blank" class="whitespace-pre-line break-inside-avoid-page">
                        <span>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                            laboris nisi ut aliquip ex ea commodo consequat.
                        </span>
                    </a>
                </div>
            </div>
        </div>

<div class="animate-in zoom-in duration-200">
            <div
                class="ring-1 rounded-lg flex flex-col space-y-2 p-4 break-inside-avoid mb-6 bg-white hover:ring-2 ring-gray-300 hover:ring-sky-400 transform duration-200 hover:shadow-sky-200 hover:shadow-md z-0 relative">
                <div class="flex flex-col break-inside-avoid-page z-0 relative">
                    <div class="flex justify-between">
                        <div class="flex space-x-6">
                            <div class="flex space-x-4 flex-shrink-0 w-52">
                                <img src="https://randomuser.me/api/portraits/women/8.jpg"
                                    class="w-10 h-10 rounded-full">
                                <div>
                                    <div class="font-semibold">
                                        Kendra
                                    </div>
                                    <div class="text-sm">
                                        @Kendra
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

<a href="#" target="_blank" class="whitespace-pre-line break-inside-avoid-page">
                        <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                            ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                            laboris nisi ut aliquip ex ea commodo consequat.
                        </span>
                    </a>
                </div>
            </div>
        </div>

<a href="#" target="_blank" class="whitespace-pre-line break-inside-avoid-page">
                        <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                            ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                            laboris nisi ut aliquip ex ea commodo consequat.
                        </span>
                    </a>
                </div>
            </div>
        </div>

<a href="#" target="_blank" class="whitespace-pre-line break-inside-avoid-page">
                        <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                            ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                            laboris nisi ut aliquip ex ea commodo consequat.
                        </span>
                    </a>
                </div>
            </div>
        </div>

</div>
</div>

Related Examples

Customer testimonies grid

Author:
Sameer Sultana

1 year ago

17.4k
Masonry Grid
Auto-adjusting masonry grid

Author:
Simon Scheffer

2 years ago

28.5k
Responsive Card Grid with images

Author:
TailwindFlex

2 years ago

17.1k
Feature Showcase
The feature showcase's responsive grid can also be used as testimonial cards.

Author:
Alok

2 years ago

20.8k
Card grid

Author:
Leon Bachmann

2 years ago

11.1k
Responsive products grid
Responsive product card grid using tailwind CSS.

Author:
Arya

2 years ago

38.9k
Tailwind image gallery
Responsive grid with evenly spaced image cards. Each card has a title label at the bottom, and there's a subtle hover effect for interactive engagement.

Author:
Alok

2 years ago

52.8k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

2 years ago

47.1k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

21k
Feature / Icon grid
Present information in a clear and organized manner with icons.

Author:
Arya

2 years ago

13.1k
Card grid for posts

Author:
Mr Robot

2 years ago

18.9k
Feature overview cards
The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

Author:
Nikita

1 year ago

4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components