Game Live Score

A live score game layout design perfect for your live scoring application

This tailwind example is contributed by Diavox Jerome Soriano, on 05-Feb-2025. Component is made with Tailwind v3.4. similar terms for this example are Toast, Snackbar

Card Notification

Author Diavox Jerome Soriano

Tailwind v3.4 1.6k 3

Fork Fullscreen

<div class="bg-gray-900 text-white w-full max-w-md mx-auto p-4 rounded-lg text-center mt-4">
    <div class="text-gray-400 text-sm uppercase">FT</div>
    <div class="flex items-center justify-center space-x-4 mt-2">
        <div class="flex flex-col items-center">
            <img src="https://placeit-img-1-p.cdn.aws.placeit.net/uploads/stage/stage_image/54875/optimized_large_thumb_stage.jpg" alt="Charlotte Hornets" class="h-12 w-12 border rounded-lg border-gray-600">
            <span class="text-sm mt-1">Cyber Militia</span>
        </div>
        <div class="text-2xl font-bold">125 - 118</div>
        <div class="flex flex-col items-center">
            <img src="https://placeit-img-1-p.cdn.aws.placeit.net/uploads/stage/stage_image/61995/optimized_large_thumb_stage.jpg" alt="Chicago Bulls" class="h-12 w-12 border rounded-lg border-gray-600">
            <span class="text-sm mt-1">Game Player</span>
        </div>
    </div>
    <div class="text-gray-400 text-sm mt-2">51-60</div>
</div>

Related Examples

Subcribe Card - Alert - Notification

ABDO-SY

1 year ago

1.2k
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Ijila Itunu

1 year ago

1.5k
Notification
Pop up card when form submitted is successful

Olajide Olamide (Laemmy)

7 months ago

781
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.5k
Ribbon at Corner

Mohit Prajapati

4 years ago

19.6k
Food Order Card
Ecommerce/Food order card layout

Rajesh Maheshwari

1 year ago

1.7k
home
html , css

Hacker Development

1 year ago

2.4k
card appetizer
ss

Anonymous

2 years ago

2.2k
Card
amazing card

Cristian

2 years ago

2.6k
less is more
less is more by salvator

Baraka Salvator

1 year ago

1.6k
Animated cards with Tailwind CSS

Michael Andreuzza

2 years ago

13.1k
Game Character Cards
Simple game character cards selection

Diavox Jerome Soriano

1 year ago

1.8k