JSFiddle - React, Tailwind, and code Playground

by saturngod

HTML

<div id="columns">
    <div class="results">
        <div class="word">Awesome</div>
        <div class="state">adj</div>
        <div class="def">ေၾကာက္ရံႊ ရိုေသစိတ္ ျဖစ္ေစေသာ။</div>
        
    </div>
    <div class="results">
        <div class="word">moon</div>
        <div class="state">n</div>
        <div class="def">လ</div>
    </div>
    
    <div class="results">
        <div class="word">morning</div>
        <div class="state">n</div>
        <div class="def">နံနက်ခင်း။ မနက်။</div>
    </div>
    
    <div class="results">
        <div class="word">Awesome</div>
        <div class="state">adj</div>
        <div class="def">ေၾကာက္ရံႊ ရိုေသစိတ္ ျဖစ္ေစေသာ။</div>
        
    </div>
    <div class="results">
        <div class="word">moon</div>
        <div class="state">n</div>
        <div class="def">လ</div>
    </div>
    
    <div class="results">
        <div class="word">morning</div>
        <div class="state">n</div>
        <div class="def">နံနက်ခင်း။ မနက်။</div>
    </div>
    
</div>

CSS

body {
    background-color:#F7F7F1;
}

#columns {
	-webkit-column-count: 3;
	-webkit-column-gap: 10px;
	-webkit-column-fill: auto;
	-moz-column-count: 3;
	-moz-column-gap: 10px;
	-moz-column-fill: auto;
	column-count: 3;
	column-gap: 15px;
	column-fill: auto;
}

.results {
	display: inline-block;
	background: #FFF;
	border: 1px solid #CFC7C2;
	/*box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);*/
	margin: 0 2px 15px;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
	padding: 15px;
	padding-bottom: 5px;
	background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
	opacity: 1;
	
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
    
    font-family:"Zawgyi-One";
}





@media (max-width: 320px) {
	#columns {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}
}

.word {
    color:#D86E66;
    font-weight:bold;
}

.state {
    color:#97B5E4;
        font-weight:bold;
}

.def {
    color:#756B5D;
    font-weight:normal;
}