JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<ul class="thumbnailList">
    <li>11</li>
    <li>22</li>
</ul>

CSS

* {
    margin:0;
    padding:0;
    list-style-type:none;
}

.thumbnailList	{width:100%;height:20px;background:#eeeeee;
	display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-content: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
}
.thumbnailList li	{width:50%;margin-top:0;background:red;
	display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: flex;
	 -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-content: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
	
}
.thumbnailList li:first-child		{margin-right:5px;}
.thumbnailList li:last-child		{margin-left:0;}
.thumbnailList li a	{width:100%;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -webkit-align-self: stretch;
    align-self: stretch;
}