Editorial Neobrutalism

✨Prompt Utilizado

UI design for [NOMBRE/TIPO DE APP] following Editorial Neobrutalism. Visual rules: Use thick 4px solid black borders on all cards and buttons. Palette: High-contrast [COLOR BASE SATURADO] and black. Typography: Oversized, heavy sans-serif (Space Grotesk) with tight letter spacing and italicized labels. Shadows: Hard-edged 45-degree solid shadows with 8px offset (no blur). Layout: Intentional asymmetry, overlapping elements, and raw 'print-magazine' feel. Atmosphere: Bold, rebellious, and high-impact.

Código HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neobrutalist Widget</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700;800&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Space Grotesk', sans-serif; background-color: #f0f0f0; }
        .brutal-card {
            border: 4px solid #000;
            box-shadow: 10px 10px 0px 0px #000;
        }
        .brutal-btn {
            border: 3px solid #000;
            box-shadow: 4px 4px 0px 0px #000;
            transition: all 0.1s;
        }
        .brutal-btn:active {
            transform: translate(2px, 2px);
            box-shadow: 0px 0px 0px 0px #000;
        }
        .stripe-bg {
            background-image: repeating-linear-gradient(45deg, #000, #000 5px, transparent 5px, transparent 15px);
        }
    </style>
</head>
<body class="flex items-center justify-center min-h-screen p-6">

    <div class="brutal-card bg-yellow-400 p-8 max-w-sm w-full flex flex-col gap-6">
        <div class="flex justify-between items-start border-b-4 border-black pb-4">
            <div>
                <span class="bg-black text-white text-[10px] px-2 py-1 font-bold uppercase mb-2 inline-block">Daily Stats</span>
                <h3 class="text-5xl font-extrabold leading-none italic uppercase">11.000</h3>
            </div>
            <div class="bg-white border-4 border-black p-2 -rotate-6">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 16v-2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/><path d="M14 16v-2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/><circle cx="12" cy="5" r="3"/><path d="m7 21 3-5h4l3 5"/></svg>
            </div>
        </div>
        
        <!-- Barra con patrón industrial -->
        <div class="w-full bg-white border-4 border-black h-14 relative flex overflow-hidden">
            <div class="bg-black h-full w-[73%] flex items-center justify-center">
                <span class="text-yellow-400 font-black text-xl italic">73%</span>
            </div>
            <div class="h-full flex-1 stripe-bg opacity-20"></div>
        </div>

        <div class="flex flex-col gap-3">
            <button class="brutal-btn bg-white py-3 font-black uppercase text-lg hover:bg-black hover:text-white">COMPARTIR</button>
        </div>
    </div>

</body>
</html>

Detalles

Fecha de creación

22 de febrero de 2026

Categoría

Web

Editar Recurso

Recursos Relacionados

Ver todos

Soft Spatial (Estilo "Glass")

UI design for [NOMBRE/TIPO DE APP] using Soft Spatial (Glassmorphism 2.0). The i...

Tactile Maximalism

UI design for [NOMBRE/TIPO DE APP] in Tactile Maximalism style. Elements must ha...

Modern Organic Bento

High-fidelity UI design for a [NOMBRE/TIPO DE APP] using a Modern Organic Bento ...