JSFiddle - React, Tailwind, and code Playground

by Ali Dadmand

HTML

<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>
<span id="question"></span>


<div id="newform">
	<button id="questionChoice1" class="choise1 choiceDefault btn" data-item="0"></button>

	<button id="questionChoice2" class="choise2 choiceDefault btn" data-item="1"></button>

	<button id="questionChoice3" class="choise3 choiceDefault btn" data-item="2"></button>
<div>

CSS

.choiceDefault{
	background: url(https://image.ibb.co/m4YXo0/04.png);
  background-repeat: no-repeat;
  background-size: 200px 45px;
}

.choiseTrue {
	background: url(https://image.ibb.co/db4GFf/04.png);
	background-repeat: no-repeat;
	background-size: 200px 45px;
}

.choiseFalse {
	background: url(https://image.ibb.co/bAe580/05.png);
	background-repeat: no-repeat;
	background-size: 200px 45px;
}


.choise1 {
		position:absolute;
    text-align: center;
    width: 205px;
		height:50px;
		border:0px;
		top:40px;
}

.choise2 {
		position:absolute;
    text-align: center;
    width: 205px;
		height:50px;
		border:0px;
		top:92px;
}

.choise3 {
		position:absolute;
    text-align: center;
    width: 205px;
		height:50px;
		border:0px;
		top:145px;
}

JavaScript 1.7

var dataList= [{'answer':'\u0631\u0633\u062A\u0645- \u0633\u0641\u06CC\u062F','date':'2018-10-14','id':1,'question':'\u0627\u0633\u0628 \u0633\u0641\u06CC\u062F \u0631\u0633\u062A\u0645 \u0628\u0631\u0627\u06CC \u06A9\u0647 \u0628\u0648\u062F \u0648 \u0686\u0647 \u0631\u0646\u06AF\u06CC \u0628\u0648\u062F\u061F','questionChoice':' \u0633\u06CC\u0627\u0648\u0634- \u0633\u06CC\u0627\u0647'},{'answer':'\u0631\u0633\u062A\u0645- \u0633\u0641\u06CC\u062F','date':'2018-10-14','id':1,'question':'\u0627\u0633\u0628 \u0633\u0641\u06CC\u062F \u0631\u0633\u062A\u0645 \u0628\u0631\u0627\u06CC \u06A9\u0647 \u0628\u0648\u062F \u0648 \u0686\u0647 \u0631\u0646\u06AF\u06CC \u0628\u0648\u062F\u061F','questionChoice':'\u0633\u0647\u0631\u0627\u0628- \u0646\u0648\u06A9 \u0645\u062F\u0627\u062F\u06CC'},{'answer':'\u0631\u0633\u062A\u0645- \u0633\u0641\u06CC\u062F','date':'2018-10-14','id':1,'question':'\u0627\u0633\u0628 \u0633\u0641\u06CC\u062F \u0631\u0633\u062A\u0645 \u0628\u0631\u0627\u06CC \u06A9\u0647 \u0628\u0648\u062F \u0648 \u0686\u0647 \u0631\u0646\u06AF\u06CC \u0628\u0648\u062F\u061F','questionChoice':'\u0631\u0633\u062A\u0645- \u0633\u0641\u06CC\u062F'},{'answer':'\u0645\u0627\u0631','date':'2018-10-14','id':1,'question':'\u062E\u0632\u0646\u062F\u0647 \u0627\u06CC \u06A9\u0647 \u0627\u0648\u0646\u0648 \u0648\u0627\u0631\u0648\u0646\u0647 \u06A9\u0646\u06CC\u0645 \"\u0631\u0627\u0645\" \u0645\u06CC\u0634\u0647\u061F','questionChoice':' \u062A\u0645\u0633\u0627\u062D'},{'answer':'\u0645\u0627\u0631','date':'2018-10-14','id':1,'question':'\u062E\u0632\u0646\u062F\u0647 \u0627\u06CC \u06A9\u0647 \u0627\u0648\u0646\u0648 \u0648\u0627\u0631\u0648\u0646\u0647 \u06A9\u0646\u06CC\u0645 \"\u0631\u0627\u0645\" \u0645\u06CC\u0634\u0647\u061F','questionChoice':'\u0645\u0627\u0631'},{'answer':'\u0645\u0627\u0631','date':'2018-10-14','id':1,'question':'\u062E\u0632\u0646\u062F\u0647 \u0627\u06CC \u06A9\u0647 \u0627\u0648\u0646\u0648 \u0648\u0627\u0631\u0648\u0646\u0647...