JSFiddle - React, Tailwind, and code Playground

by Jose Quichiz

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS Fiddle - Code Playground</title>
</head>
<body>
  <header>
    <svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.394 15.759s7.554 4.246 9.09 5.109c.165.093.333.132.492.132.178 0 .344-.049.484-.127 1.546-.863 9.155-5.113 9.155-5.113.246-.138.385-.393.385-.656 0-.566-.614-.934-1.116-.654 0 0-7.052 3.958-8.539 4.77-.211.115-.444.161-.722.006-1.649-.928-8.494-4.775-8.494-4.775-.502-.282-1.117.085-1.117.653 0 .262.137.517.382.655zm0-3.113s7.554 4.246 9.09 5.109c.165.093.333.132.492.132.178 0 .344-.049.484-.127 1.546-.863 9.155-5.113 9.155-5.113.246-.138.385-.393.385-.656 0-.566-.614-.934-1.116-.654 0 0-7.052 3.958-8.539 4.77-.211.115-.444.161-.722.006-1.649-.928-8.494-4.775-8.494-4.775-.502-.282-1.117.085-1.117.653 0 .262.137.517.382.655zm10.271-9.455c-.246-.128-.471-.191-.692-.191-.223 0-.443.065-.675.191l-8.884 5.005c-.276.183-.414.444-.414.698 0 .256.139.505.414.664l8.884 5.006c.221.133.447.203.678.203.223 0 .452-.065.689-.203l8.884-5.006c.295-.166.451-.421.451-.68 0-.25-.145-.503-.451-.682z" fill-rule="nonzero"/></svg>
  </header>
  <main class="margen-de-12 bloque rojo">
    <img src="https://panuts.com/wp-content/uploads/2024/07/Banner_Fever-Tree-Agua-Tonica-Mediterranean-200-ml-x-24-Botellas.jpg">
    <p>
    Imagen bonita
    </p>
    <button id="boton">Alerta sorpresa</button>
    <section id="creditos">
      <p>Texto de prueba</p>
      <span></span>
      <p>Texto de prueba</p>
    </section>
    
    <section>
      <p>Texto de prueba</p>
      <span></span>
      <p>Texto de prueba</p>
    </section>
    
    <section>
      <p>Texto de prueba</p>
      <span></span>
      <p>Texto de prueba</p>
    </section>
  </main>
  
  <section>
    <p>Texto de prueba</p>
    <span></span>
    <p>Texto de...

CSS

/*
etiquetas > nombre de etiqueta, no tiene sintaxis especial
clases -> inicia por puntos, si se juntan, condiciona todas las clases al mismo tiempo
id's -> inicia por #
parentesco -> se describe por espacios (padres) y por comas (hermanos), padres y hermanos.
*/

div {
  background: green;
}

.margen-de-12 {
  padding: 12px;
}

.bloque {
  display: block;
}


main section {
  background: silver;
}


main p {
  font-family: Arial;
}


main > p {
  background: gold;
}

JavaScript

/*
HTML y CSS (done)
scoping, anonymousfunctions (Done)
one-page lifecycle: load, unload y visibilitychange (done)
polifylling ()
Vue.Js ->  componentes
GIT */




/// ..........

window.addEventListener('load', function () {
	console.log('cargo')
});
window.addEventListener('unload', function () {
	console.log('unload')
});
window.addEventListener('visibilitychange', function (event) {
console.log('oli')
});


window.Math.buenasTardes = function () {
console.log('buenas tardes')
}

// .........