JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<title> 
        Dialogue box    
        </title>
        <link rel="stylesheet" href="contact.css">
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   
    <body>
         <button id="alert-btn">Alert message</button>
            <div class="container contact-form ">
                <form class="well form-horizontal" id="contact-form-id" name="contact-form-name" >
                     <!--Write to Us-->
                     <fieldset>
                        <legend style="text-align:center">Write to Us</legend>
                         <!--Name-->
                        <div class="form-group">
                          <label class="col-sm-3 control-label">Name</label>   
                          <div class="input-group">
                            <span class="input-group-addon" id="basic-addon"><i class="glyphicon glyphicon-user"></i></span>
                            <input type="text" class="form-control" id="input-text" value="" name="username"
                                   placeholder="Enter you name">
                            </div>    
                         </div>   
                          <!--Email id-->
                         <div class="form-group">
                          <label class="col-sm-3 control-label">Email id</label>   
                          <div class="input-group">
                            <span class="input-group-addon" id="basic-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                            <input type="text" class="form-control" name="email"
                                   placeholder="Enter your mail">
                            </div> 
                                 
                         </div>   
                      ...

CSS

body{
    padding: 0;
    margin: 0;
}

.container{
    display: none;
    position: relative;
    margin-top: 100px;
    margin-left: 200px;
    text-align: center;
    height: 400px;
    width: 450px;
    background-color: #E9B9B2;
    border-radius: 60px;
}
.form-control{
    border-radius: 10px !important;
}
#basic-addon{
    border-radius: 10px !important;
}
.form-horizontal{
  margin: 30px 10px 15px 10px; 
  border-radius: 30px !important;
}
.form-group{
    margin: 5px 5px 5px 5px !important;
}
a:first-child{
    float: right;
    width:50%;
    background-color: none;
    border-radius:10px;
    transition: background-color 0.5s ease-in-out,border-radius 0.5s ease-in-out;
}

a:first-child:hover{
    background-color: #FC8D82;
    border-radius: 10px;
}
a:last-child{
    float: right;
    width:50%;
    background-color:none;
    border-radius: 10px;
    transition: background-color 0.5s ease-in-out,border-radius 0.5s ease-in-out;
}

a:last-child:hover{
     background-color:#85D374;
    border-radius: 10px;
}
a{

    text-decoration: none !important;
    padding:5px 5px 5px 5px;
    text-transform: uppercase;
}