JSFiddle - React, Tailwind, and code Playground
by ChangJoo Park
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/js/mdb.js"></script>
<!--Section: Contact v.1-->
<section class="py-3">
<!--Section heading-->
<h2 class="font-weight-bold text-center h1 py-5">Contact us</h2>
<!--Section description-->
<p class="text-center mb-5 pb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate
esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<div class="row">
<!--Grid column-->
<div class="col-lg-5 mb-4">
<!--Form with header-->
<div class="card">
<div class="card-body">
<!--Header-->
<div class="form-header blue accent-1">
<h3>
<i class="fa fa-envelope"></i> Write to us:</h3>
</div>
<p>We'll write rarely, but only the best content.</p>
<br>
<!--Body-->
<div class="md-form">
<i class="fa fa-user prefix grey-text"></i>
<input type="text" id="form-name" class="form-control">
<label for="form-name">Your name</label>
</div>
<div class="md-form">
<i class="fa fa-envelope prefix grey-text"></i>
<input type="text" id="form-email" class="form-control">
<label for="form-email">Your email</label>
</div>
<div class="md-form">
...