JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<aside>
    <figure>
        <figcaption>
            
<h3>title center</h3>

        </figcaption>
        <img src="http://www.piermariagiordani.it/progetti/architettura/casa-tre/_img/copertina.jpg" />
    </figure>
</aside>
<aside>
    <figure>
        <figcaption>
            
<h3>title center</h3>

        </figcaption>
        <img src="http://www.piermariagiordani.it/progetti/architettura/municipio/_img/copertina.jpg" />
    </figure>
</aside>
<aside>
    <figure>
        <figcaption>
            
<h3>title center</h3>

        </figcaption>
        <img src="http://www.piermariagiordani.it/progetti/architettura/studio-grattacielo/_img/copertina.jpg" />
    </figure>
</aside>
<aside>
    <figure>
        <figcaption>
            
<h3>title center</h3>

        </figcaption>
        <img src="http://www.piermariagiordani.it/progetti/interni/attico-a/_img/copertina.jpg" />
    </figure>
</aside>
<aside>
    <figure>
        <figcaption>
            
<h3>title center</h3>

        </figcaption>
        <img src="http://www.piermariagiordani.it/progetti/interni/casa-malori/_img/copertina.jpg" />
    </figure>
</aside>
<aside>
    <figure>
        <figcaption>
            
<h3>title center</h3>

        </figcaption>
        <img src="http://www.piermariagiordani.it/progetti/interni/casa-vecchi/_img/copertina.jpg" />
    </figure>
</aside>
<aside>
    <figure>
        <figcaption>
            
<h3>title center</h3>

        </figcaption>
        <img src="http://www.piermariagiordani.it/progetti/interni/prince-discoteca-ristorante/_img/copertina.jpg" />
    </figure>
</aside>
<aside>
    <figure>
        <figcaption>
            
<h3>title center</h3>

        </figcaption>
        <img src="http://www.piermariagiordani.it/progetti/progetti-urbani/riqualificazione-centro-storico/_img/copertina.jpg" />
    </figure>
</aside>
<aside>
    <figure>
        <figcaption>
            
<h3>title center</h3>

        </figcaption>
        <img...

CSS

/* boxes , image  & ribbon */
 html {
    font-size:1.2em;
    /* rezize font-size to see */
    background:#333;
}
body {
    text-align:center;
}
aside {
    display:inline-table;
    padding:0 2em;
    background:#159;
    height:10em;
    width:13em;
    margin:0.5em;
    box-shadow:0 0 5px gold;
}
aside figure {
    display:table-cell;
    vertical-align:middle;
}
aside figure img {
    max-height:8em;
    width:13em;
    max-width:13em;
    box-shadow:-0 0 0 1px tomato;
}
aside figure figcaption {
    position:relative;
    z-index:1;
    margin:0;
}
aside figure figcaption:after {
    content:'';
    border:0.5rem solid red;
    position:absolute;
    right:-1rem;
    top:4.55rem;
    height:0;
    font-size:0;
    overflow:hidden;
    border-right:solid transparent 0.5rem;
    border-bottom:solid transparent 0.5rem;
}
aside figure figcaption h3 {
    position:absolute;
    text-align:center;
    text-shadow:1px 1px white;
    box-shadow: 15px 15px 15px -12px;
    overflow:hidden;
    border-radius:0.15em;
    margin:0 -1rem 0 -1.1em;
    margin-top:2.75em;
    width:13.1em;
    z-index:1;
}
aside figure figcaption h3:before {
    content:'';
    position:absolute;
    transform:rotate(32deg) skew(-30deg);
    height:1.5em;
    width:1.25em;
    left:-0.8em;
    box-shadow: 0 0 0 5000px tomato, inset 0px 1px 5px;
    z-index:-1;
}
@media all and (max-width:2700px) {
    html {
        font-size:50px;
        transition:1s;
    }
}
@media all and (max-width:2000px) {
    html {
        font-size:45px;
        transition:1s;
    }
}
@media all and (max-width:1600px) {
    html {
        font-size:30px;
        transition:1s;
    }
}
@media all and (max-width:1200px) {
    html {
        font-size:25px;
        transition:1s;
    }
}
@media all and (max-width:1100px) {
    html {
        font-size:22px;
        transition:1s;
    }
}
@media all and (max-width: 900px) {
    html {
        font-size:18px;
        transition:1s;
    }
}
@media all and...