JSFiddle - React, Tailwind, and code Playground

by trewknowledge

HTML

<article>
    <div class="image">
        <a class="video-trigger" href="rrkrvAUbU9Y">Play</a>
        <img src="http://placehold.it/350x150" alt="" />
    </div>
        <div class="content">
    <h3>Post Title Goes Here</h3>
    <p> Some article text goes here. Lorem Ipsum Dolor Set Amid...</p>
</div>
</article>

<article>
    <div class="image">
      <img src="http://placehold.it/350x150" alt="" />
      <a class="video-trigger" href="u1zgFlCw8Aw">Play</a>
    </div>
    <div class="content">
    <h3>Post Title Goes Here</h3>
    <p> Some article text goes here. Lorem Ipsum Dolor Set Amid...</p>
    </div>
</article>


<article>
     <div class="image">
         <a class="video-trigger" href="rrkrvAUbU9Y">Play</a>
         <img src="http://placehold.it/350x150" alt="" />
    </div>
        <div class="content">
    <h3>Post Title Goes Here</h3>
    <p> Some article text goes here. Lorem Ipsum Dolor Set Amid...</p>
        </div>
</article>

CSS

article {
    border-bottom:1px solid #000; 
    height:200px;
    width:350px;
    margin:10px 0;
    padding: 10px 0;
    position:relative;
}

article .image {

}
.video-trigger {
    background:white;
    padding:5px;
    position:absolute;
    top:20px;
    right:20px;
}

article .content {

}