JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<div class="layout"><article class="post"><header class="post-header"><figure class="avatar-wrapper"><img src="https://tiktakit.com/wp-content/uploads/user-face-128.png" class="avatar" alt="Post avatar" /></figure><div class="content"><h3>David Chase</h3><p class="title">Cyber security expert</p></div></header><section class="post-content"><p class="content">Sorry for the hour,<br>I'm just in a group that posts about attacks, and right now they posted that your site is being attacked.<br>I would be happy to help, whether it's consulting or even lifting the site (if it goes down) using one of the known platforms free of charge.<br>I would appreciate it if you could respond to me here or on my private mobile I know it seems a bit fishy, but the goal here is really to assist and help prevent an attack that will in the first step bring down your site and can also bring down additional services.<br>Sorry again for the interruption.</p><div class="stats"><span class="likes">100 Likes</span><span class="comments">. 10 Comments</span></div></section></article></div>

CSS

@import url(https://fonts.googleapis.com/css?family=PT+Sans);body{font-family:"PT Sans",sans-serif;background:#192e4d;height:350px;}section,p,div,h3,span,img{margin:0!important;padding:0;} 

.btn{background-color:#ffffff;padding:10px;color:#191919;font-weight:bold;border:none;border-radius:3px;margin:2px;cursor:pointer;outline:none;}.btn:hover{color:#ffffff;background-color:#192e4d;}

.layout{height:400px;display:flex;flex-direction:row;align-items:center;justify-content:center;margin-top:3%;}.post{background:#fff;box-shadow:2px 1px 4px 2px rgba(100,100,100,0.4);width:500px;border:2px solid #f3f3f3;border-radius:3px;color:#191919;display:flex;flex-direction:column;margin:0;}.post-header{padding:10px 20px 0;display:flex;flex-direction:row;width:100%;justify-content:flex-start;}.post-header .content{width:90%;padding:10px 0;}.post-header .content .title,.post-header .content {color:#a4a5a5;font-size:0.9rem;font-weight:normal;}.post-header .avatar-wrapper{width:15%;padding:10px 0;margin:0;}.post-header .avatar-wrapper .avatar{width:60px;height:60px;border-radius:50%;}.post-content{margin:0;padding:10px 20px 5px;color:#181818;}.post-content .stats{padding:10px 0;color:#a4a5a5;font-size:0.8rem;font-weight:normal;}