JSFiddle - React, Tailwind, and code Playground

by Alexey Sirotkin

HTML

<div id="macy-container">
                    <div class="demo"><img src="//unsplash.it/557/387" alt="" class="demo-image"></div>
                    <div class="demo"><img src="//unsplash.it/602/660" alt="" class="demo-image"></div>
                    <div class="demo"><img src="//unsplash.it/660/646" alt="" class="demo-image"></div>
                    <div class="demo"><img src="//unsplash.it/741/375" alt="" class="demo-image"></div>
                    <div class="demo"><img src="//unsplash.it/813/455" alt="" class="demo-image"></div>
                    <div class="demo"><img src="//unsplash.it/470/896" alt="" class="demo-image"></div>
                    <div class="demo"><img src="//unsplash.it/664/653" alt="" class="demo-image"></div>
                    <div class="demo"><img src="//unsplash.it/708/313" alt="" class="demo-image"></div>
                    <div class="demo"><img src="//unsplash.it/738/578" alt="" class="demo-image"></div>
                    <div class="demo"><img src="//unsplash.it/458/482" alt="" class="demo-image"></div>
                    <div class="demo"><img src="//unsplash.it/439/856" alt="" class="demo-image"></div>
                    <div class="demo"><img src="//unsplash.it/549/315" alt="" class="demo-image"></div>
                    <div class="demo"><img src="//unsplash.it/877/693" alt="" class="demo-image"></div>
                    <div class="demo"><img src="//unsplash.it/542/805" alt="" class="demo-image"></div>
                    <div class="demo"><img src="//unsplash.it/683/445" alt="" class="demo-image"></div>
                    <div class="demo"><img src="//unsplash.it/616/340" alt="" class="demo-image"></div>
                    <div class="demo"><img src="//unsplash.it/533/317" alt="" class="demo-image"></div>
                    <div class="demo"><img src="//unsplash.it/700/894" alt="" class="demo-image"></div>
                    <div class="demo"><img src="//unsplash.it/663/541" alt=""...

CSS

#macy-container{margin-top:22px}#macy-container::after{content:"";display:table;clear:both}.demo{margin-bottom:24px;border-radius:4px;overflow:hidden;border:1px solid #eee}.demo-image{width:100%;display:block;height:auto}.feature-list{margin-bottom:0;margin-left:0;width:100%;list-style:none}.feature-list li{display:inline-block;width:25%;text-align:center}.feature-list li::before{color:inherit;content:"•";color:#54b9cb;margin-right:7px}.btn{background-color:#54b9cb;line-height:53px;padding:0 18px 0 0;display:inline-block;text-decoration:none;color:#fff;border-radius:4px;transition:all .25s ease-in-out;font-size:18px}.btn:hover{background-color:#4CA8B9}.btn.has-icon::before{margin-right:18px;padding:0 18px;border-right:1px solid #4daabb;line-height:53px}footer{padding:80px 0;text-align:center}@media screen and (max-width: 800px){.hero__title{width:80%}.feature-list li{width:50%;line-height:2}}@media screen and (max-width: 600px){.hero{padding:60px 0 40px}.hero__title{width:100%}.feature-list li{width:100%;line-height:2}.section{padding:25px 0}.footer{padding:0 0 40px}}@media screen and (max-width: 400px){.btn.has-icon{padding:18px;line-height:1.2}.btn.has-icon::before{display:none}}