JSFiddle - React, Tailwind, and code Playground

by Blanca B

HTML

<h1>Punto de Blanca</h1>
<h2>Tu blog de punto de cruz</h2>

<div id="cuerpo">
<h3>Abrimos el 1 de enero</h3>
<p>Tras tantos años haciendo punto de cruz y habiendo sido mis diseños y productos publicados en revistas como Cross Sticher, The World of Cross Stiching y más, y animada por amigos y familiares, he decidido abrir un blog donde compartir todo lo que sé sobre el punto de cruz.<br />
<br />
En él publicaré tres veces a la semana: lunes, miércoles y viernes, yl contenido será variado. Desde patrones con diferentes modelos, hasta ideas sobre dónde usarlo pasando por todo tipo de tutoriales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut risus nec ex pharetra aliquet ut quis erat. Vivamus finibus dignissim arcu eget tincidunt. Maecenas nec turpis a lacus laoreet tempus. Nulla mattis commodo semper.</p>

<h4>Tienda online Punto de Blanca</h4>
<p>Como complemento del blog, abriré una pequeña tienda online donde ofreceros aquellas cosas que utilizo, para facilitaros la vida. A veces, cuando queremos llevar a cabo algún proyecto que hemos visto en otro lugar, es difícil hacernos con toda la materia prima para que quede igual o que el patrón nos encaje, etc. Mediante la venta de todo aquello que yo utilizo, esto no os pasará más.<br />
<br />
En la tienda habrá desde baberos hasta marcos, pasando por cojines y por supuesto, hilos, agujas y demás. También venderé kits completos para un proyecto determinado, y de diferentes niveles de dificultad. Con ello espero que más gente se una a este maravilloso hobby que tan bien nos viene para desconectar y desestresarnos de los problemas del día a día.</p>

<p id="nota-pie"><b><u>Nota</u>:</b>Aunque el blog abre el 1 de enero, la tienda online no estará disponible hasta el 1 de marzo. Mientras tanto, podéis seguirme en mi página de facebook, Punto de Blanca.</p>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Homemade+Apple);

body {
  background-image: url("https://3.bp.blogspot.com/-_h85J_71Er0/Vm7zs1KtYPI/AAAAAAAAPJ8/WizN9IuQ8fc/s1600/blanca4%2B-%2Bcopia.jpg");
}

h1 {
  font-family: "Homemade Apple";
  color: white;
  font-weight: lighter;
  text-align: center;
}

h2 {
  font-family: "Open Sans";
  color: #71B5BA;
  font-size: 16px;
  margin-top: -30px;
  text-align: center;
  margin-bottom: 40px;
}

#cuerpo {
  border: 2px dashed #71B5BA;
  background-color: white;
  border-radius: 20px;
  box-shadow: 0 0 8px 4px white;
  width: 950px;
  color: #4e3d26;
  font-family: "Open Sans";
  font-size: 14px;
  padding: 10px 30px 10px 30px;
  text-align: justify;
}

h3 {
  font-family: "Homemade Apple";
  color: #96C5C6;
  font-size: 20px;  
}

h4 {
  font-family: "Homemade Apple";
  color: #A2CBC9;
  font-size: 18px; 
  text-align: center;
}

#nota-pie {
  padding-
  color: #A69984;
}