JSFiddle - React, Tailwind, and code Playground

by Abhishek27Sharma

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Inspiration</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="div-class" id="div1-id">
    	<h1>Kunal Shah</h1>
    	<p>The person who serves as an example to thousands </p>
    	<h2>Founder of CRED and Freecharge</h2>
   	 
    	<ul>
        	<li>CRED</li>
        	<li>Freecharge</li>
    	</ul>
    	<h2>Some of his Investments are Rapido and Unacademy</h2>
    	<ol>
        	<li>Rapido</li>
   		   <li>Unacademy</li>
    	</ol>
    	<a href="https://en.everybodywiki.com/Kunal_Shah" target="_blank" class="kunal">Want to know more about him!</a>
    	<br>
    	<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTNKwiqO7GRGVB0VMoeSNqV_rwRPsVzy  DILdQ&usqp=CAU' alt="Kunal Shah">
   	 
    	<form>
        	<div class="flex-form">
            	<label class="labelForm"><b>Name</b></label>
            	<input type="text" placeholder="Enter your Name">
            	<label class="labelForm"><b>Age</b></label>
            	<input type="number" placeholder="Enter your Age">
        	</div>
        	<br>
        	<label class="labelForm"><b>What you like about Kunal Shah</b></label><br>
        	<textarea></textarea>
        	<br>
        	<label>Your Fav Company</label>
        	<br>
        	<input type="checkbox" name="Company" id="cred" value="cred">
        	<label>Cred</label>
        	<input type="checkbox" name="Company" id="Freecharge" value="Freecharge">
        	<label>Freecharge</label>	 
        	<br>
        	<label>Gender</label>
        	<br>
        	<input type="radio" name="gender" id="male" value="male">
        	<label>Male</label>
        	<input type="radio" name="gender" id="Female" value="Female">
        	<label>Female</label>   
        	<br>
        	<input type="submit" value="Submit">
    	</form>   
	</div>

	<div class="div-class">
    	<h2 class="socailh2">His Social Accounts</h2>
    	<table>
        	<tr>
            	<th>Instagram</th>
           ...

CSS

* {
  color: white;
  background-color: black;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  text-align: center;
}

.div-class {
  text-align: center;
}

ul,
ol {
  display: none;
}

li {
  max-width: 20px;
}

img {
  margin-top: 20px;
}

form {
  max-width: 400px;
  margin: 0px auto;
  margin-top: 20px;
  padding: 10px;
}

input {
  max-width: 200px;
  border: none;
  background-color: white;
  color: black;
  margin: 5px;
}

.flex-form {
  display: flex;
}

.flex-form label {
  margin-top: 5px;
}

.flex-form input {
  padding: 5px;
  border-radius: 0.8rem;
}

textarea {
  margin-top: 5px;
  border: none;
  background-color: white;
  color: black;
  border-radius: 0.8rem;
  width: 200px;
  min-height: 100px;
  padding: 10px;
  margin-bottom: 10px;
}

label,
input {
  padding: 2px;
}

table,
th,
td {
  margin: 0px auto;
  border: 1px solid white;
}

input[type='checkbox'],
input[type='radio'] {
  margin-top: 10px;
  margin-bottom: 15px;
}


input[type='submit'] {
  /* background-color: white; */
  padding: 10px;
  border: none;
  border-radius: 0.8rem;
  color: black;
}

input[type='submit']:hover {
  background-color: black;
  color: white;
  transform: scale(1.5);
  cursor: pointer;
}

.socailh2 {
  margin: 0;
  padding-bottom: 10px;
}

th,
td {
  padding: 10px;
}