JSFiddle - React, Tailwind, and code Playground

by thanhansoft

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
 <div class="bg-info-fdola"><i class="fa fa-star fa-2x" aria-hidden="true"></i><p>asd sadsadsa dsad asd asdsad his his phis paragraph is styled with class "bg-info". aragraph is styled with class "bg-info". paragrapsdf sdfsd fsd fsdf sdfsdf sdfsd fsdf dsf sdfsdfh is styled with class "bg-info". asdas das sad asd sadas sad asdas </p><p>asd sadsadsa<a href="">Test stes tstestes</a></a> dsad asd asdsad his his phis paragraph is styled with class "bg-info". aragraph is styled with class "bg-info". paragrapsdf sdfsd fsd fsdf sdfsdf sdfsd fsdf dsf sdfsdfh is styled with class "bg-info". asdas das sad asd sadas sad asdas </p>
   </div>

CSS

.bg-info-fdola{padding: 1rem;color:#0288d1; background:#e1f5fe; margin: 0.5rem auto}
.bg-info-fdola p{margin-bottom: 0.5rem;line-height: 1.2}
.bg-info-fdola a{color:#f57c00}
.bg-info-fdola a:hover{text-decoration:none;color:red}
.bg-info-fdola i.fa{    float: left;
    margin-right: 0.5em;}