JSFiddle - React, Tailwind, and code Playground

by charaf11

HTML

<div style="margin-left:auto;margin-right:auto; width: 600px;">
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />

<div style="font-size:20px;font-weight:bold;">
<a href="http://www.google.com">Google</a>
</div>
<div>
This is some multi line text to show that multiple lines to not align very well.
</div>

CSS

*{
    margin:0;
    padding:0;
}

     div#block>div{text-align:left;  margin-left:45px;}

#block { 
    border-width: 2px; 
    border-color: #4682B4; 
    background-color: WHITE; 
    width: 200px; 
    text-align: center; 
    line-height:30px;
    padding:3px 0;
    padding-right: 100px;
    float:left;
}
img{
float:left;
}
#block:hover {
  background-color: #C2DFFF ;
}