Modern Organic Bento

✨Prompt Utilizado

High-fidelity UI design for a [NOMBRE/TIPO DE APP] using a Modern Organic Bento layout. Components are organized in a clean grid with extra-large corner radius (32px to 40px). Use a background of soft off-white (#F8F9FA) with cards in pure white. Accents in [COLOR PRIMARIO] and [COLOR SECUNDARIO]. Visuals: Use ultra-soft drop shadows (0px 10px 30px rgba(0,0,0,0.05)) to create depth without borders. Typography: Modern geometric sans-serif (Inter), bold for metrics. Icons: Thin-lined and minimalist. Atmosphere: Airy, professional, and highly organized.

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>Bento Style Widget</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', sans-serif; background-color: #F8F9FA; }
    </style>
</head>
<body class="flex items-center justify-center min-h-screen p-6">

    <!-- Widget: Modern Organic Bento -->
    <div class="bg-white p-8 rounded-[40px] shadow-2xl shadow-gray-200/60 max-w-sm w-full flex flex-col gap-6 border border-gray-50">
        <div class="flex justify-between items-start">
            <div>
                <p class="text-gray-400 text-xs font-bold uppercase tracking-widest">Actividad Hoy</p>
                <h3 class="text-4xl font-extrabold mt-1 text-gray-900">11.000 <span class="text-lg text-gray-300 font-normal">/ 15k</span></h3>
            </div>
            <div class="bg-orange-500 p-3 rounded-2xl text-white shadow-lg shadow-orange-200">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" 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 de progreso limpia -->
        <div class="w-full bg-gray-100 h-6 rounded-full overflow-hidden">
            <div class="bg-gradient-to-r from-orange-400 to-orange-600 h-full w-[73%] rounded-full transition-all duration-1000"></div>
        </div>

        <div class="flex justify-between items-center text-sm font-semibold">
            <span class="text-orange-600">73% del objetivo</span>
            <button class="text-gray-400 hover:text-gray-900 transition-colors">Detalles →</button>
        </div>
    </div>

</body>
</html>

Detalles

Fecha de creación

2 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...

Tactile Maximalism

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