JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<div class="post">
  <img src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=64" />
  <div class="content">
    <h4>Lázaro Contreras</h4>
    <p>
      Este es un texto cualquiera solamente es para este ejemplo.
    </p>
  </div>
  <a class="material-icons close">clear</a>
</div>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<div class="post">
  <img src="//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=64" />
  <div class="content">
    <h4>Lázaro Contreras</h4>
    <p>
      Este es un texto cualquiera solamente es para este ejemplo.
    </p>
  </div>
  <a class="material-icons close">clear</a>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  font-family: helvetica;
}

html {
  background: white;
}

div.post {
  position: relative;
  display: block;
  top: 0;
  bottom: 0;
  margin: 10px 100px;
  height: 64px;
  text-align: left;
  color: gray;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

div.post img {
  position: absolute;
  top: 0;
  left: 0;
}
div.post .content {
  position: absolute;
  top: 0;
  left: 0;
  margin: 5px 10px 5px 74px;
}
div.post .close {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 18px;
  cursor: pointer;
}

JavaScript

var bclose = document.querySelectorAll('.close');
for(var i = 0; i < bclose.length; i++){
	var close = bclose[i];
  close.onclick = function() {
  	this.parentNode.remove();
  }
}