Tactile Maximalism

✨Prompt Utilizado

UI design for [NOMBRE/TIPO DE APP] in Tactile Maximalism style. Elements must have a 3D 'squishy' or inflatable look. Use neomorphic depth with dual shadows: light source from top-left (white) and soft shadow from bottom-right. Containers have inner shadows (inset) to look like carved plastic or clay. Color palette: [COLOR VIBRANTE] over a cool grey base (#E0E5EC). Buttons must have specular highlights to simulate a glossy finish. Layout: Bubble-like shapes and rounded pill buttons. Atmosphere: Touchable, fun, and futuristic.

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>Tactile Style Widget</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body { background-color: #E0E5EC; }
        
        /* Neumorfismo: Sombras externas e internas */
        .tactile-container {
            background: #E0E5EC;
            box-shadow: 12px 12px 24px #bebebe, -12px -12px 24px #ffffff;
            border-radius: 44px;
        }
        .tactile-inner-track {
            background: #E0E5EC;
            box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffffff;
        }
        .tactile-button {
            background: #E0E5EC;
            box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
            transition: 0.2s ease;
        }
        .tactile-button:active {
            box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
        }
        .glossy-progress {
            background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
            box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
            position: relative;
        }
        /* Reflejo de luz superior */
        .glossy-progress::after {
            content: "";
            position: absolute;
            top: 4px;
            left: 10%;
            width: 80%;
            height: 4px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 99px;
        }
    </style>
</head>
<body class="flex items-center justify-center min-h-screen p-6">

    <div class="tactile-container p-10 max-w-sm w-full flex flex-col gap-8">
        <div class="flex justify-between items-center">
            <div>
                <p class="text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1">Pasos Diarios</p>
                <h3 class="text-4xl font-black text-gray-700">11.000</h3>
            </div>
            <div class="tactile-button p-5 rounded-full text-blue-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" 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 volumen -->
        <div class="w-full h-12 rounded-full tactile-inner-track p-2">
            <div class="glossy-progress h-full w-[73%] rounded-full"></div>
        </div>

        <button class="tactile-button py-4 rounded-2xl font-black text-blue-600 uppercase tracking-widest text-sm">
            Ver Progreso
        </button>
    </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...

Editorial Neobrutalism

UI design for [NOMBRE/TIPO DE APP] following Editorial Neobrutalism. Visual rule...

Modern Organic Bento

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