JSFiddle - React, Tailwind, and code Playground

by Petar Pilipovic

HTML

<div class="jumbotron">
        <div class='container hidden-xs hidden-sm '>
                <div class="row">
                    <div class="col-lg-4 col-md-4" style="background-color: yellow;">
                        <a class="yellow" href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                    <div class="col-lg-4 col-md-4" style="background-color: orange;">
                        <a class="orange" href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                    <div class="col-lg-4 col-md-4" style="background-color: red;">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 col-md-4" style="background-color: blue;">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2010-26-a-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                    
                    <div class="col-lg-4 col-md-4"><a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-27-a-thumb.jpg' class="img-circle" alt="Responsive image"></a></div>
                    
                    <div class="col-lg-4 col-md-4 " style="background-color: green;">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-27-a-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 col-md-4"...

CSS

/* Position icons into sircle */



div.container.hidden-xs.hidden-sm div.row div.col-lg-4.col-md-4 a img.img-circle {
    position: relative;
    display: block;
    width: 100px;
    margin: 100px;
}


div.container.hidden-lg.hidden-md div.row div.col-sm-4.col-xs-4 a img.img-circle 
    {
         display:block;margin:10px auto;
    }


div.container.hidden-lg.hidden-md div.row div.col-sm-4.col-xs-4 a img.img-circle 
    {
         display:block;margin:10px auto;
    }