Home
Sophia Baker
Twitter tweet clone

Twitter tweet clone

Replica of twitter tweet card

This tailwind example is contributed by Sophia Baker, on 20-Jan-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is copy

Card Clone

Author Sophia Baker

9.7k

Fork Fullscreen

<div class="font-sans rounded-md border px-6 py-4 max-w-md">
    <div class="flex items-center"><img src="https://pbs.twimg.com/profile_images/1488434260860182529/uCD5L1hQ_400x400.jpg" class="h-12 w-12 rounded-full">
        <div class="flex flex-col ml-4"><a class="font-bold text-black" href="#">Emily Jane
                Morgan</a><span class="text-grey">@MorganEmilyJane</span></div><svg viewBox="328 355 335 276"
            class="ml-auto" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M 630, 425 A 195, 195 0 0 1 331, 600 A 142, 142 0 0 0 428, 570 A 70, 70 0 0 1 370, 523 A 70, 70 0 0 0 401, 521 A 70, 70 0 0 1 344, 455 A 70, 70 0 0 0 372, 460 A 70, 70 0 0 1 354, 370 A 195, 195 0 0 0 495, 442 A 67, 67 0 0 1 611, 380 A 117, 117 0 0 0 654, 363 A 65, 65 0 0 1 623, 401 A 117, 117 0 0 0 662, 390 A 65, 65 0 0 1 630, 425 Z"
                style="fill:#3BA9EE"></path>
        </svg>
    </div>
    <div class=" mt-3 mb-1 leading-normal text-lg">It’s a pretty gnarly afternoon session, compared to this morning.
        simply greedy stance from the event runners. They know full well how many tickets they have sold (and can cap)
        🙊 Thank god for the Sake 🥂</div>
    <div class="text-grey mb-3 text-sm">11:56 AM - Aug 3, 2009</div>
    <div class="flex text-grey">
        <div class="flex items-center mr-4"><svg class="mr-2" width="24" height="24" viewBox="0 0 24 24">
                <path class="fill-current"
                    d="M14.046 2.242l-4.148-.01h-.002c-4.374 0-7.8 3.427-7.8 7.802 0 4.098 3.186 7.206 7.465 7.37v3.828c0 .108.045.286.12.403.143.225.385.347.633.347.138 0 .277-.038.402-.118.264-.168 6.473-4.14 8.088-5.506 1.902-1.61 3.04-3.97 3.043-6.312v-.017c-.006-4.368-3.43-7.788-7.8-7.79zm3.787 12.972c-1.134.96-4.862 3.405-6.772 4.643V16.67c0-.414-.334-.75-.75-.75h-.395c-3.66 0-6.318-2.476-6.318-5.886 0-3.534 2.768-6.302 6.3-6.302l4.147.01h.002c3.532 0 6.3 2.766 6.302 6.296-.003 1.91-.942 3.844-2.514 5.176z">
                </path>
            </svg><span>406</span></div>
        <div class="flex items-center mr-4"><svg class="mr-2" width="24" height="24" viewBox="0 0 24 24">
                <path class="fill-current"
                    d="M23.77 15.67c-.292-.293-.767-.293-1.06 0l-2.22 2.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414 0-.75.336-.75.75s.336.75.75.75h5.85c1.24 0 2.25 1.01 2.25 2.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06 0s-.294.768 0 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767 0-1.06zm-10.66 3.28H7.26c-1.24 0-2.25-1.01-2.25-2.25V6.46l2.22 2.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768 0-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06 0l-3.5 3.5c-.294.292-.294.767 0 1.06s.767.293 1.06 0l2.22-2.22V16.7c0 2.068 1.683 3.75 3.75 3.75h5.85c.414 0 .75-.336.75-.75s-.337-.75-.75-.75z">
                </path>
            </svg><span>726</span></div>
        <div class="flex items-center"><svg class="mr-2" width="24" height="24" viewBox="0 0 24 24">
                <path class="fill-current"
                    d="M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.813-1.148 2.353-2.73 4.644-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.375-7.454 13.11-10.037 13.156H12zM7.354 4.225c-2.08 0-3.903 1.988-3.903 4.255 0 5.74 7.035 11.596 8.55 11.658 1.52-.062 8.55-5.917 8.55-11.658 0-2.267-1.822-4.255-3.902-4.255-2.528 0-3.94 2.936-3.952 2.965-.23.562-1.156.562-1.387 0-.015-.03-1.426-2.965-3.955-2.965z">
                </path>
            </svg><span>616</span></div>
    </div>
</div>

Related Examples

Hover effect card

Author:
Samuel Dawson

2 years ago

31.5k
Clone of LinkedIn Questionnaire Card
Clone of LinkedIn Questionnaire Card

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

3.7k
Linkedin Add to your feed Clone
Linkedin Add to your feed Clone

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

3.3k
Trending Users
Tailwind Flex Trending Users Card Design

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

3.8k
Kids E-learning Platform Card
Kids E-learning Platform Card Clone

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

1.6k
GitHub For you Feed
GitHub For you Feed Clone

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

2.2k
Spinner with card
Use this animated loading indicator when content inside of a card is still loading.

Author:
Md. Tofayel islam

1 year ago

2.8k
payment card
A payment card is a type of card issued by a financial institution (like a bank) that allows the cardholder to make financial transactions. These transactions can include purchasing goods and services, withdrawing cash, or transferring money. Here’s a description based on the main types of payment cards:

Author:
dev-fab250

6 months ago

508
Coming Soon Section
Simple and beautiful card for your showing on your projects (in development) home screen

Author:
Noob

3 years ago

10.4k
Product card for eCommerce website

Author:
Steven Kuhn

3 years ago

12.5k
Tailwind AoPS Demo - Isabel
Starter code for an interactive Tailwind Demo

Author:
Isabel McGuigan

1 year ago

2.5k
Tailwind Flex Component: Responsive Testimonial Section UI
A clean, modern, and fully responsive Testimonial Section built using Tailwind CSS and Flexbox. Ideal for portfolios, agency websites, SaaS landing pages, or any modern UI project. This reusable component includes user images, job titles, and quotes—perfect for showcasing feedback and adding trust to your UI.

Author:
Muhammad Umair Arshad

6 months ago

718

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components