Interactive Tweet Card

Name: Aurenza UI
Author: Aurenza UI

effects

Crisp social proof tweet testimonial card with dynamic counters and author badges.

#tweet#social#card#proof#testimonial

Live Interactive Preview

Abhishek Kumar

@mrabhi2k3

Just shipped 30+ handcrafted copy-paste components with pure Tailwind CSS and zero third-party dependencies in Aurenza UI! 🚀

1.2k 34210:42 AM · May 2026

Component Source Code

Select language in the dropdown

TweetCard.tsx

1'use client';
2
3import React from 'react';
4import { FaXTwitter, FaHeart, FaRetweet } from 'react-icons/fa6';
5
6export default function TweetCard() {
7  return (
8    <div className="w-full max-w-sm rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 shadow-xl select-none transition-all hover:scale-102">
9      <div className="flex items-center justify-between mb-3">
10        <div className="flex items-center gap-2.5">
11          <div className="h-10 w-10 rounded-full bg-gradient-to-tr from-blue-600 to-cyan-500 flex items-center justify-center text-white font-bold text-sm">
12            AK
13          </div>
14          <div>
15            <p className="text-xs font-bold text-slate-900 dark:text-white">Abhishek Kumar</p>
16            <p className="text-[11px] text-slate-400">@mrabhi2k3</p>
17          </div>
18        </div>
19        <FaXTwitter className="h-4 w-4 text-slate-400" />
20      </div>
21
22      <p className="text-xs sm:text-sm text-slate-700 dark:text-slate-200 leading-relaxed mb-4">
23        Just shipped 30+ handcrafted copy-paste components with pure Tailwind CSS and zero third-party dependencies in Aurenza UI! 🚀
24      </p>
25
26      <div className="flex items-center justify-between border-t border-slate-100 dark:border-slate-800 pt-3 text-xs text-slate-400">
27        <span className="flex items-center gap-1.5 hover:text-rose-500 transition cursor-pointer">
28          <FaHeart className="h-3.5 w-3.5" /> 1.2k
29        </span>
30        <span className="flex items-center gap-1.5 hover:text-emerald-500 transition cursor-pointer">
31          <FaRetweet className="h-3.5 w-3.5" /> 342
32        </span>
33        <span>10:42 AM · May 2026</span>
34      </div>
35    </div>
36  );
37}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/effects/TweetCard.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import InteractiveTweetCard from '@/components/effects/TweetCard';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <InteractiveTweetCard />
7    </main>
8  );
9}