JSFiddle - React, Tailwind, and code Playground

by Sebastian Brosch

HTML

<div class="container">
     <div class="box">
         <h1>Lorem Ipsum</h1>   
         <img src="https://placehold.it/300x150"/>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus consectetur dolor a porttitor. Curabitur id sem sed ante fringilla pulvinar et id lectus. Nullam justo ipsum, hendrerit ut commodo nec, pellentesque nec erat. Pellentesque pharetra.</p> 
         <a href="http://example.com">example.com</a>
     </div>
     <div class="box">
         <h1>Lorem Ipsum</h1>   
         <img src="https://placehold.it/300x150"/>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus consectetur dolor a porttitor. Curabitur id sem sed ante fringilla pulvinar et id lectus. Nullam justo ipsum, hendrerit ut commodo nec, pellentesque nec erat. Pellentesque pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus consectetur dolor a porttitor.</p> 
         <a href="http://example.com/">example.com</a>
     </div>
</div>

CSS

.container {
    display:flex;
}
.container .box {
    background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#fff), color-stop(.1,#fff));
    border:1px solid #ccc;
    margin:20px;
    min-height:310px;
    padding:10px;
    position:relative;
    width:300px;
    -webkit-border-radius: 60px 5px;
    -webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
}    
.container .box img {  
    width:100%;
}
.container .box p {
    margin:5px 0 15px;
    text-align:justify;
}
.container .box h1 {
    font-size:20px;
    font-weight:bold;
    margin-top:5px; 
    text-shadow:1px 1px 3px rgba(0,0,0,0.3);
}
.container .box a {
    color:#4a4a4a;
    text-decoration:none;
}
.container .box a:hover{
    color:#6b6b6b;
    text-decoration:underline;
}