JSFiddle - React, Tailwind, and code Playground

by firegroove

HTML

<div class="main">
	<div class="quarter quarter1" id="q1" onclick="quarterOne()"></div>
	<div class="quarter quarter2" id="q2" onclick="quarterTwo()"></div>
	<div class="quarter quarter3" id="q3" onclick="quarterThree()"></div>
	<div class="quarter quarter4" id="q4" onclick="quarterFour()"></div>
    <div class="rating" id="rating"></div>
</div>

CSS

/**
* Quarter Circles
*/

.main {
	position:relative;
	width:200px;
	height:200px;
	margin:0 ;
}

.quarter {
	position:absolute;
	width:50%;
	height:50%;
	transition:background-color 0.2s ease-in-out;
    cursor:pointer;
    box-shadow:0px 0px 15px rgba(0,0,0,0.7);
}
.quarter:hover {
	background-color:purple;.
    box-shadow:0px 0px 15px rgba(0,0,0,0.7);
}
.quarter1 {
	top:0;
	left:0;
	background-color:red;
	border-radius:100% 0 0 0;
}
.quarter2 {
	top:0;
	right:0;
	background-color:blue;
	border-radius:0 100% 0 0 ;
}
.quarter3 {
	bottom:0;
	left:0;
	background-color:orange;
	border-radius:0 0 0 100%;
}
.quarter4 {
	bottom:0;
	right:0;
	background-color:green;
	border-radius:0 0 100% 0 ;
}

.rating {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(to bottom, rgb(217,217,217) 10%, rgb(245,245,245) 90%, rgb(253,253,253) 100%);
    /* background-image: -o-linear-gradient(bottom, rgb(217,217,217) 10%, rgb(245,245,245) 90%, rgb(253,253,253) 100%); */
    /* background-image: -moz-linear-gradient(bottom, rgb(217,217,217) 10%, rgb(245,245,245) 90%, rgb(253,253,253) 100%); */
    /* background-image: -webkit-linear-gradient(bottom, rgb(217,217,217) 10%, rgb(245,245,245) 90%, rgb(253,253,253) 100%); */
    
    padding-left: 40px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    line-height: 100px;
    font-family: sans-serif;
    font-weight: 400;
    text-shadow: 0 1px 0 #fff;
    font-size: 28px;
    border-radius: 100px;
    position: absolute;
    z-index: 5;
    top: 50px;
    left: 50px;
    /* box-shadow:0px 0px 20px rgba(0,0,0,0.7); */
}

JavaScript

function quarterOne(){
document.getElementById("rating").innerHTML="1";
}
function quarterTwo(){
document.getElementById("rating").innerHTML="2";
}
function quarterThree(){
document.getElementById("rating").innerHTML="3";
}
function quarterFour(){
document.getElementById("rating").innerHTML="4";
}