JSFiddle - React, Tailwind, and code Playground

by Ruben Geert van den Berg

HTML

<div class='featured left'>
			<img src='http://www.spss-tutorials.com/img/turtle-left.png'>
			<h2 class='ol'>
				<a href="#">Why I love my Turtle!</a>
			</h2>
			<p>My turtle, Harry Turtle, is simply the friendliest and most clever turtle in the world! <a href='http://www.dumpert.nl/mediabase/2013731/8ff0c33d/harry_turtle.html'>Read more.</a></p>
		</div>

CSS

a{
text-decoration:none;
color:#0a93cd;
}

div{
display:table;
margin:1.5em auto 0 auto;
overflow:hidden;
border:1px solid #0a93cd;
border-radius:.5em;
width:50em;
padding:0;
}

div h2{
margin:0;
padding:.1em 0 .1em .5em;
padding:0 0 0.1em .5em;
text-align:center;
border:1px solid #0a93cd;
border-width:0px 0 1px 0 ;
/*
background:#000;
*/
 background:#0a93cd;
 }

div h2 a{
color:#0a93cd;
color:#fff;
font:normal .8em arial;
font:normal 1em arial;
font:bold .8em arial;
}

div h2 a:hover{
color:#00006d;
/* font:bold 1em arial; */
}
div.top img{
width:100%;
display:block;
border-bottom:1px solid #0a93cd;
}

div.left img{
/* 
height:100%;
 */
width:50%;
/*  */float:left;
border-right:2px solid #0a93cd;
}

div.right img{
/* 
height:100%;
 */
width:50%;
float:right;
border-bottom:1px solid #0a93cd;
}

div p{
padding:.5em 1em .5em 1em;
/* display:inline; */
/* display:inline-block;
 */
 }