JSFiddle - React, Tailwind, and code Playground

CSS design of small focus

by Ben Clayton

HTML

<div class="smfocus">
    
    <div class="sftext">the lazy green fox has just jumped over the pink cat which is sitting under the bridge.</div>
    
    <div class='sfimg'><img src="http://www.sourcebmx.com/dyn/_smallads//UTDSource_TOP.jpg" /></div>
    
    <a class="sfbutton">More</a>
</div>

CSS

.smfocus {width:400px;height:164px;border:green 3px solid;position:relative;}

.sftext  {
            position:absolute;
            width:120px;
            height:144px;
            display:inline-block;
            background-color:
            #908080;
            color:#FFFFFF;
            padding:10px;
          }

.sfimg   {
            width:260px;
            padding-left:140px;
          }

img       {width:100%;}

.sfbutton {
            position:absolute;
            padding:4px 20px 4px 20px;
            border:1px red solid;
            background-color:yellow;
            top:42%;
            left:100px;
          }