JSFiddle - React, Tailwind, and code Playground

by gilbertomg

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cards de Status Modernos</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css" rel="stylesheet">
    
</head>
<body>
    <div class="container">
        <h1>Cards de Status Modernos</h1>
        
        <div class="row g-4">
            <!-- Success Card -->
            <div class="col-lg-4 col-md-6">
                <div class="card status-card status-success h-100">
                    <div class="card-body text-center">
                        <div class="card-icon mx-auto">
                            <i class="bi bi-check-circle-fill"></i>
                        </div>
                        <h5 class="card-title text-success">Sucesso</h5>
                        <p class="card-text">Operação realizada com êxito. Todos os sistemas funcionando perfeitamente.</p>
                        <span class="badge bg-success status-badge">Ativo</span>
                    </div>
                    <div class="card-footer text-center">
                        <small class="text-muted">
                            <i class="bi bi-clock"></i> Atualizado há 2 min
                        </small>
                    </div>
                </div>
            </div>

            <!-- Danger Card -->
            <div class="col-lg-4 col-md-6">
                <div class="card status-card status-danger h-100">
                    <div class="card-body text-center">
                        <div class="card-icon mx-auto pulse">
                            <i class="bi bi-exclamation-triangle-fill"></i>
                        </div>
                     ...

CSS

body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 2rem 0;
        }

        .status-card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            overflow: hidden;
            margin-bottom: 2rem;
        }

        .status-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }

        .card-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .status-success .card-icon {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
        }

        .status-danger .card-icon {
            background: linear-gradient(135deg, #dc3545, #e91e63);
            color: white;
        }

        .status-info .card-icon {
            background: linear-gradient(135deg, #17a2b8, #007bff);
            color: white;
        }

        .status-warning .card-icon {
            background: linear-gradient(135deg, #ffc107, #fd7e14);
            color: white;
        }

        .status-dark .card-icon {
            background: linear-gradient(135deg, #343a40, #495057);
            color: white;
        }

        .status-light .card-icon {
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            color: #495057;
            border: 2px solid #dee2e6;
        }

        .status-neutral .card-icon {
            background: linear-gradient(135deg, #6c757d, #adb5bd);
            color: white;
        }

        .card-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
   ...