JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<div class="ventana">
  <h3 class="titulo">Titulo</h3>
  <span class="texto" contenteditable="true">
  Hola Mundo! asd asd as <br>
  sdfsdfsdfsdfs.
  </span>
  <button class="boton">Mostrar</button>
</div>

CSS

*{
  margin: 0;
  padding: 0;
}
.ventana {
  width: 100px;
  margin: 20px auto;
  padding: 10px;
  font-family: Arial;
  background: white;
  border: 1px solid red;
  border-radius: 10px;
  overflow: hidden;
}
.ventana .titulo{
  color: blue;
  text-align: center;
  margin-bottom: 10px;
}
.ventana .boton{
  width: 57px;
  height: 27px;
  float: right;
  padding: 5px;
  border-radius: 5px;
  border: none;
  color: white;
  background: green;
  transition: .2s all ease-in;
}
.ventana .boton:hover{
  transform: translate(-5px, -5px);
  box-shadow: 5px 5px 4px 0px #00000059;
}

JavaScript

var boton = document.querySelector('.boton');
var texto = document.querySelector('.texto');

boton.onclick = function(){
	alert(texto.innerText);
}