JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<div class="container">
<div class="pageCenter">
<div class="toaster">
 some message 
 <span class="close-toast" onclick="closeTtoast()">&times;</span>
</div>
<form>

    <div class="form-control">
      <label>Enter URL</label>
      <input type="text"/>
    </div>
     <button>Submit</button>
</form>
</div>
</div>

CSS

html{
  border-top: 5px solid #3d99f5;
}
.container {
  width: 100%;
  height: auto;
  margin: 0 auto;
  font-family: arial;
}

.form-control {
  width: 100%;
  float: left;
}

.toaster {
  min-width: 250px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  font-size: 17px;
}
.toaster span {
  float: right;
}

.container label{
  display: block;
  padding: 16px 0;
  font-size: 14px;
}

.container input{
display: block;
    line-height: 32px;
    height: 36px;
    font-size: 16px;
    outline: none;
    border-radius: 4px;
    border: 1px solid #ddd;
    width: 100%;
    box-sizing: border-box;
    padding-left: 6px;
}

.container button {
    width: 100%;
    margin-top: 32px;
    color: #fff;
    font-size: 14px;
    background: #3d99f5;
    border: 0;
    border-radius: 4px;
    line-height: 32px;
    height: 36px;
    border: 1px solid #3d99f5;
    text-transform: uppercase;
}
.pageCenter{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
}

JavaScript

function closeToast() {
		
}