curso-2025-04-tailwind/15.blog.html at main · certidevs/curso-2025-04-tailwind · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blog de Noticias • Tailwind CSS 4.1</title>

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <!-- Inter font for a modern look -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">


</head>

<body class="font-sans text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-950">
    <!-- NAVBAR -->
    <nav class="bg-white/70 dark:bg-gray-950/70 backdrop-blur border-b border-gray-200/60 dark:border-gray-700 sticky top-0 z-50">
      <div class="max-w-7xl mx-auto flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
        <div class="flex items-center gap-3">
          <a href="#" class="text-2xl font-extrabold text-indigo-600 dark:text-indigo-400">NewsBlog</a>
          <ul class="hidden md:flex gap-6 ml-8 text-sm font-medium">
            <li><a class="hover:text-indigo-600" href="#">Inicio</a></li>
            <li><a class="hover:text-indigo-600" href="#">Tecnología</a></li>
            <li><a class="hover:text-indigo-600" href="#">Negocios</a></li>
            <li><a class="hover:text-indigo-600" href="#">Ciencia</a></li>
          </ul>
        </div>
        <button id="theme-toggle" aria-label="Cambiar tema" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800">
          <svg id="theme-toggle-sun" class="hidden h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 18a6 6 0 100-12 6 6 0 000 12z"/>
            <path d="M12 2v2m0 16v2m10-10h-2M4 12H2m15.364 6.364l-1.414-1.414M6.05 6.05L4.636 4.636m12.728 0l-1.414 1.414M6.05 17.95l-1.414 1.414" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <svg id="theme-toggle-moon" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
            <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
          </svg>
        </button>
      </div>
    </nav>

    <!-- HERO -->
    <section class="bg-gray-100 dark:bg-gray-900 py-16">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid gap-10 md:grid-cols-2 items-center">
        <div>
          <h1 class="text-4xl sm:text-5xl font-extrabold mb-4">La revolución de la IA en el desarrollo web</h1>
          <p class="text-lg text-gray-700 dark:text-gray-300 mb-8">Descubre cómo la inteligencia artificial está transformando la forma en que diseñamos experiencias digitales.</p>
          <a href="#" class="inline-block px-8 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-semibold shadow">Leer artículo</a>
        </div>
        <img src="https://placehold.co/800x500" alt="Imagen de IA" class="rounded-lg shadow-lg aspect-video object-cover">
      </div>
    </section>

    <!-- GRID DE ARTÍCULOS -->
    <section class="py-20">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-extrabold mb-10">Últimas historias</h2>
        <div class="grid gap-10 sm:grid-cols-2 lg:grid-cols-3">
          <!-- CARD -->
          <article class="bg-white dark:bg-gray-900 rounded-xl shadow hover:shadow-lg transition">
            <img src="https://placehold.co/600x400" alt="Quantum computing" class="rounded-t-xl w-full h-56 object-cover">
            <div class="p-6">
              <span class="text-indigo-600 text-sm font-medium">Tecnología</span>
              <h3 class="mt-2 text-xl font-semibold">Avance en computación cuántica</h3>
              <p class="mt-2 text-gray-700 dark:text-gray-400 line-clamp-3">Investigadores han desarrollado una nueva técnica que aumenta la estabilidad de los qubits, acercando la computación cuántica a la realidad.</p>
              <a href="#" class="mt-4 inline-flex items-center font-medium text-indigo-600 hover:text-indigo-800">Leer más →</a>
            </div>
          </article>
          <!-- CARD -->
          <article class="bg-white dark:bg-gray-900 rounded-xl shadow hover:shadow-lg transition">
            <img src="https://placehold.co/600x400" alt="Startup" class="rounded-t-xl w-full h-56 object-cover">
            <div class="p-6">
              <span class="text-green-600 text-sm font-medium">Negocios</span>
              <h3 class="mt-2 text-xl font-semibold">Startups latinas rompen récords de inversión</h3>
              <p class="mt-2 text-gray-700 dark:text-gray-400 line-clamp-3">Las startups de América Latina captaron cifras récord en rondas de financiamiento durante el primer trimestre de 2024.</p>
              <a href="#" class="mt-4 inline-flex items-center font-medium text-green-600 hover:text-green-800">Leer más →</a>
            </div>
          </article>
          <!-- CARD -->
          <article class="bg-white dark:bg-gray-900 rounded-xl shadow hover:shadow-lg transition">
            <img src="https://placehold.co/600x400" alt="Space exploration" class="rounded-t-xl w-full h-56 object-cover">
            <div class="p-6">
              <span class="text-purple-600 text-sm font-medium">Ciencia</span>
              <h3 class="mt-2 text-xl font-semibold">Nueva misión a Marte confirma agua subterránea</h3>
              <p class="mt-2 text-gray-700 dark:text-gray-400 line-clamp-3">El rover Perseverance ha descubierto indicios claros de agua salada bajo la superficie marciana, cambiando nuestra comprensión del planeta rojo.</p>
              <a href="#" class="mt-4 inline-flex items-center font-medium text-purple-600 hover:text-purple-800">Leer más →</a>
            </div>
          </article>
        </div>
      </div>
    </section>

    <!-- NEWSLETTER CTA -->
    <section class="relative py-24 bg-gradient-to-r from-indigo-600 to-purple-600 text-white overflow-hidden">
      <div class="absolute inset-0 pointer-events-none [mask-image:radial-gradient(ellipse_at_center,white,transparent)] opacity-20">
        <svg class="absolute w-full h-full" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"><defs><pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse"><path d="M 80 0 L 0 0 0 80" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(#grid)"/></svg>
      </div>
      <div class="relative max-w-xl mx-auto text-center px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl sm:text-4xl font-extrabold">¿Quieres mantenerte al día?</h2>
        <p class="mt-3 text-lg text-white/90">Suscríbete y recibe las noticias más relevantes cada semana.</p>
        <form class="mt-8 flex flex-col sm:flex-row gap-4">
          <input type="email" required placeholder="Tu correo electrónico" class="w-full px-5 py-3 rounded-md text-gray-900 placeholder-gray-500 focus:ring-4 focus:ring-white/40">
          <button type="submit" class="px-8 py-3 bg-white/90 text-indigo-700 font-semibold rounded-md hover:bg-white">Suscribirme</button>
        </form>
      </div>
    </section>

    <!-- FOOTER -->
    <footer class="bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
      <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
        <div>
          <h3 class="text-xl font-bold">NewsBlog</h3>
          <p class="mt-4 text-gray-600 dark:text-gray-400">Las últimas noticias de tecnología, negocios y ciencia.</p>
        </div>
        <div>
          <h4 class="font-semibold mb-3">Categorías</h4>
          <ul class="space-y-2 text-gray-600 dark:text-gray-400">
            <li><a href="#" class="hover:underline">Tecnología</a></li>
            <li><a href="#" class="hover:underline">Negocios</a></li>
            <li><a href="#" class="hover:underline">Ciencia</a></li>
          </ul>
        </div>
        <div>
          <h4 class="font-semibold mb-3">Compañía</h4>
          <ul class="space-y-2 text-gray-600 dark:text-gray-400">
            <li><a href="#" class="hover:underline">Acerca de</a></li>
            <li><a href="#" class="hover:underline">Equipo</a></li>
            <li><a href="#" class="hover:underline">Contacto</a></li>
          </ul>
        </div>
        <div>
          <h4 class="font-semibold mb-3">Redes Sociales</h4>
          <ul class="flex gap-4 text-gray-500 dark:text-gray-400 text-xl">
            <li><a href="#" aria-label="Twitter" class="hover:text-indigo-600"><svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M8 19c11 0 17-9 17-17 0-.3 0-.6 0-.8A12 12 0 0026 3a12 12 0 01-3.5 1A6 6 0 0025 1a12 12 0 01-3.9 1.5A6 6 0 0012 6a17 17 0 01-12-6 6 6 0 002 8A6 6 0 012 8v.1a6 6 0 004.8 5.9A6 6 0 012 14a6 6 0 005.6 4A12 12 0 010 22a17 17 0 009 3"/></svg></a></li>
            <li><a href="#" aria-label="GitHub" class="hover:text-indigo-600"><svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 .5a12 12 0 00-3.8 23.4c.6.1.8-.2.8-.6v-2.2c-3.3.7-4-1.6-4-1.6-.5-1.3-1.2-1.6-1.2-1.6-1-.7.1-.7.1-.7 1 .1 1.5 1 1.5 1 .9 1.6 2.4 1.1 3 .9.1-.7.3-1.1.6-1.4-2.6-.3-5.4-1.3-5.4-5.7 0-1.3.5-2.4 1.2-3.3-.1-.3-.5-1.5.1-3 0 0 1-.3 3.3 1.3a11 11 0 016.1 0C18 7.8 19 8.1 19 8.1c.6 1.5.2 2.7.1 3 .8.9 1.2 2 1.2 3.3 0 4.4-2.8 5.4-5.4 5.7.4.3.7.9.7 1.8v2.7c0 .4.2.7.8.6A12 12 0 0012 .5z"/></svg></a></li>
          </ul>
        </div>
      </div>
      <div class="border-t border-gray-200 dark:border-gray-700 py-6 text-center text-sm text-gray-500">© Ejemplo blog de noticias.</div>
    </footer>


</body>
</html>