JSFiddle - React, Tailwind, and code Playground

by Pedro Matias

HTML

<div id="someDiv" class="colors">
    <ul>
        <li id="c1" class="color">color1</li>
        <li id="c2" class="color">color2</li>
        <li id="c3" class="color">color3</li>
        <li id="c4" class="color">color4</li>
    </ul>
</div

CSS

.colors ul li{
	display: inline-block;
	list-style: none;
	float: left;
	width: 25%;
	height: auto;
	margin-right: 0;
	padding-top: 5%;
	padding-bottom: 5%;
	cursor: pointer;
    color: white;
	}
.color{
	-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
	clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
	}
#c1{
	-webkit-clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
	clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
	background-color: #562b44;
	}
#c2{
	background-color: #abf6d6;
	}
#c3{
	background-color: #aa2d53;
	}
#c4{
	-webkit-clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
	clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
	background-color: #dca096;
	}