JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<body
<form>
<img src="https://cdn2.iconfinder.com/data/icons/social-media-2022/512/bulb_mind_brain_svg-256.png" alt="hi" style="width:256px;height:256px;">
<br>

<br>

<h1>COINS</h1>

<h1><div id="output">00</div></h1>

<select id="dropDownId">

<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">21</option>
<option value="23">22</option>
<option value="24">23</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option...

CSS

html {

text-align: center;

}

body {

    background-color: Aquamarine ;
}

    select {
    padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background:#f8f8f8;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;

}

   @media screen and (-webkit-min-device-pixel-ratio:0)

   {

    select
 {

 padding-right:18px

}

}

label

 {

position:relative

}

label:after

 {
    content:'<>';
    font:11px "Consolas", monospace;
    color:#aaa;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:2px;
    padding:0 0 2px;
    border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;
}

label:before

 {
    content:'';

    right:6px; top:0px;

    width:20px; height:20px;

    background:#f8f8f8;

    position:absolute;

    pointer-events:none;

    display:block;
}

.styled-button-2

 {
	-webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	-moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	border-bottom-color:#333;
	border:1px solid #61c4ea;
	background-color:#7cceee;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	color:#333;
	font-family:'Verdana',Arial,sans-serif;
	font-size:14px;
	text-shadow:#b2e2f5 0 1px 0;
	padding:10px

}

.styled-button-3 

{
	-webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	-moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	border-bottom-color:#333;
	border:1px solid #61c4ea;
	background-color:HotPink...

JavaScript

$(document).ready(function ()

   {
    
    var seconds;
    
  $("#btnShowSimple").click(function (e)

         {

      $("#output").html("00");

   
   function countdown() 

{
    seconds = 60;

    function tick() 

    {

    var counter = document.getElementById('countdown');

    seconds--;

    counter.innerHTML = "0:" + (seconds < 10 ? "0" : "") + String(seconds);

        if( seconds > 0 )

 {
   setTimeout(tick, 1000);

        }
 else 

{
  alert("Game over");
  
  HideDialog();

 }
    }

tick();

}

countdown();

       ShowDialog(true);


   e.preventDefault();

      });

      $("#btnShowModal").click(function (e)

      {

     function countdown() 

   {

    seconds = 60;

    function tick() 

    {

    var counter = document.getElementById('countdown');

    seconds--;

    counter.innerHTML = "0:" + (seconds < 10 ? "0" : "") + String(seconds);

        if( seconds > 0 )

 {
   setTimeout(tick, 1000);

        }
 else 

{
  alert("Game over");
  
  HideDialog();

 }
    }

tick();

}

countdown();

       ShowDialog(true);

     e.preventDefault();
   });

$("#btnClose").click(function (e)

      {
         HideDialog();

location.reload();

         e.preventDefault();

      });

$("#btnSubmit").click(function (e)

      {

ShowDialog(false);

location.reload();

e.preventDefault();

});

$("#shuffle div").hover(function() {

    $(this).css('cursor','pointer');

}, function() {

    $(this).css('cursor','auto');

});

$("#shuffle div").click(function(e)

{
 
 var select=$('#dropDownId :selected').text();

 var Original=($(this).attr("id"));
 
 var parent = $("#shuffle");

 var divs = parent.children();
  
 var Count=0;

 

if (Original==select)

{

$('#output').html(function(i, val) { return val*1+1 });

}

while (divs.length) 

{

parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);

}

}); 

});

   function ShowDialog(modal)

   {
      $("#overlay").show();

      $("#dialog").fadeIn(300);

      if (modal)

 ...