JSFiddle - React, Tailwind, and code Playground

by shamaleyte

HTML

<div class="post-listing clearfix">
            
            
                <div class="post-item active">
                    <div class="per-item">
                    
                        
                            <div class="hs-featured-image-wrapper">
                                
                                    <a href="https://www.allstorage.de/blog/abenteuer-renovierung" title="" class="hs-featured-image-link">
                                        <img src="https://www.allstorage.de/hubfs/brush-1034901_1280.jpg?t=1513254830988" class="hs-featured-image" alt="Abenteuer Renovierung">
                                    </a>
                                
                                
                                <div class="tag-name">
                                
                                    <span>Privat</span>
                                
                                </div>
                                
                            </div>
                        
                        <div class="post-body clearfix">
                            <h2><a href="https://www.allstorage.de/blog/abenteuer-renovierung">Abenteuer Renovierung</a></h2>
                            <p>Von: <span class="author-name">Linda Meyer</span><span class="publish-date">Oktober 17, 2017</span></p>
                            <!--post summary-->
                            <p>Wenn Sie in Erwägung ziehen, Ihr Haus zu renovieren oder sogar zu sanieren, sollten Sie sich einen guten Plan dafür zurechtlegen und dieser Plan sollte auf jeden Fall Self-Storage beinhalten. Wenn Sie Ihre Möbel und andere Habseligkeiten einlagern, [...]</p>
                        </div>
                    
                </div>
                </div>
            
                <div class="post-item">
                    <div class="per-item">
                    
                        
                            <div class="hs-featured-image-wrapper">
 ...

CSS

.post-listing.clearfix {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-direction: row;
    -webkit-flex-direction: row;
    width: auto;
    justify-content: flex-start;
    margin-right: 0;
    margin-left: 0;
}

.post-item {
    display: flex;
    flex-basis: 33.333%;
    -webkit-flex-basis: 33.333%;
    -ms-flex-basis: 33.333%;
    -moz-flex-basis: 33.333%;
    float: left;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 36px;
    position: relative;
    text-align: center;
}

.post-item .per-item {
    max-width: 352px;
    margin: 0 auto;
    background: #fff;
}

.blog.blog-listing .post-item .hs-featured-image-wrapper {
    position: relative;
    display: block;
    width: 100%;
}
img {
    max-width: 100%;
    height: auto;
    border: 0;
    -ms-interpolation-mode: bicubic;
    vertical-align: bottom;
}
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.blog.blog-listing .post-item .hs-featured-image-wrapper .hs-featured-image-link img.hs-featured-image {
    border-width: 0;
    max-width: 100%;
    height: auto;
    width: 100%;
    display: block !important;
    float: none;
    margin: 0;
    -webkit-transition: .07s;
    -moz-transition: .07s;
    transition: .07s;
}