JSFiddle - React, Tailwind, and code Playground

by purush97k

HTML

<div id="wrapper">
        <input type="button" value="submit" action="submit.php">
        <input type="button" value="submit" action="submit.php" id="button1">
        <input type="button" value="login" action="submit.php" id="button2"> 
        <input type="button" value="I'm Big hahaha" action="something.php" id="button3">
        <input type="button" value="Click Me" id="button4">
        <input type="button" value="Yes" id="button5">
        <input type="button" value="Say" id="button6">
        <input type="button" value="Barrel" id ="button7">
        <input type="button" value="Modern" id ="button8">
        <input type="button" value="Barrel" id ="button9">
        <input type="button" value="Login" id ="button10">
        <input type="button" value="SignUp" id ="button11">
        <input type="button" value="Barrel" id ="button12">
        <input type="button" value="Move Over!" id ="button13">
        <input type="button" value="Feather" id ="button14">
        <input type="button" value="Barrel" id ="button15">

CSS

#wrapper{ 
            /*background-image: -webkit-linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0)); 
            background-color:#f90; */
            margin: 0;
            padding: 0; 
            margin-top: 100px;
            margin-left: 25px;
      }
    input{ cursor: pointer; margin-right: 25px;}

    #button1{ 
          width: 80px; 
          height: 75px; 
          font-size: 22px; 
          border-radius: 50%; -moz-border-radius:50%; -webkit-border-radius:50%;
          cursor: pointer; 
          box-shadow: #999 0px 5px 15px 1px; 
          border:none;
          font-family: Bradley hand ITC; 
          font-weight: bold;
          background: #f90;
          margin-right: 25px;

            }
    #button1:hover{ background: #000; color: #fff;}

    #button2{ 
          width: 150px;
          height:50px;
          font-size: 22px;
          border-top-right-radius: 15px; -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px;
          border-bottom-left-radius: 15px; -moz-border-radius-bottomleft:10px; -webkit-border-bottom-left-radius:10px;
          border:none;
          background: purple;
          color: #fff; 
          margin-right: 25px;
           }
    #button2:hover{ box-shadow: 0px 4px 5px 1px #999; }

    #button3{
         width: 300px;
         height: 50px;
         font-size: 24px;
         margin-top: 15px;
          }
    #button4{ 
         background-image: url("a.jpg");
         border:none;
         width: 200px;
         height: 50px;
         font-size: 20px;
         border-top-right-radius: 15px; -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px;
         border-bottom-left-radius: 15px; -moz-border-radius-bottomleft:10px; -webkit-border-bottom-left-radius:10px;

          }
    #button4:hover{
         border-top-right-radius: 0px; -moz-border-radius-topright:0px; -webkit-border-top-right-radius:0px;
         border-bottom-left-radius: 0px; -moz-border-radius-bottomleft:0px;...