nft card

This tailwind example is contributed by 5upreme505, on 21-Oct-2024. Component is made with Tailwind v3.4.

Tailwind v3.4 2.1k 7

<div class="flex min-h-screen items-center justify-center bg-blue-900 text-white">
  <div class="max-w-sm space-y-4 rounded-xl bg-blue-950 p-6">
    <img src="https://i.ibb.co/TkbnsyH/image-equilibrium.jpg" alt="" class="rounded-xl" />
    <h1 class="font-bold">Equilibrium #3429</h1>
    <p class="text-s text-blue-200">Our Equilibrium collection promotes balance and calm.</p>

<div class="flex items-center space-x-4">
      <img src="https://i.ibb.co/gdghc6B/image-avatar.png" alt="" class="h-10 w-10 rounded-full border-2" />
      <h1 class="text-blue-200">Creation of <span class="text-white">Jules Wyvern</span></h1>
    </div>
  </div>
</div>

Related Examples

My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

788
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Hamza Atig

1 year ago

1.3k
AI Orb For Voice To Voice

Hamza Atig

6 months ago

832
chat ui advanced
Professional chat ui, connect me for jsx https://abhirajk.vercel.app/

Abhiraj

1 year ago

2.5k
Tailwind invoice example

Elijah Davis

3 years ago

19.8k
Cockatoo

Lokesh H

1 month ago

74
Calculator
A Basic Calculator

Debbie F

2 years ago

2.5k
NOTIFICATION
This code can serve as a boiler-plate for a notification for an application

NUNNA VIJAYA KRISHNA

7 months ago

1.1k
Testimonial that What Client Says

Abdul Baset Bappy

1 year ago

1.9k
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Ranit Saha

1 year ago

2.7k
Table CRUD
CRUD TABLE DESIGN

Abhiraj

1 year ago

5k
GMT Live Coding

Seth

7 months ago

378