JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="survey_form.css" media="screen"/>
        <meta charset="UTF-8">
        <meta name="description">
       
    </head>
    <body>
        <div>
        <header class="header">
        <h1 id="title">SIGMA XI: EVENT REGISTRATION</h1>
        </header></div>
        <main>
            <div> <p id="description">Please fill out the form below to participate.</p></div>
                
                <form id="survey-form">
                   <div>
                    <label id="name-label" for="name">Full Name <span class="imp">*</span></label>
                    <input type="text" class="content" id="name" placeholder="Baidhya Jansu" required>
                </div><div>
                    <label id="email-label">Email Id <span class="imp">*</span></label>
                    <input type="email" class="content"  id="email" placeholder="hansa@gmail.com" required>
                </div><div>
                    <label id="number-label">Mobile No. <span class="imp">*</span></label>
                    <input type="number" class="content"  id="number" min="9800000000" max="98700000000" placeholder="eg. 9815709575" required>
                </div><div>
                    <p>Which stage Programmer are you?</p>
                    <select  id="dropdown" class="content"  name="role" required>
                       
                        <option disabled selected value>Select current level</option>
                        <option value="student">Beginner</option>
                        <option value="student">Intermediate</option>
                        <option value="student">Expert</option>
                        
                    </select></div>

                <div><p>Which Domain are you interested in:</p><label></label>
               <input type="radio" name="Raja" value="Dance">Technical<br>
                <input type="radio" name="Raja" value="Dance">Management<br>
...

CSS

html{
    background-color: honeydew;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-image: url("https://images.vexels.com/media/users/3/148259/isolated/preview/2215d0f2abb8701eaed352fb688c2787-red-flower-vines-background-by-vexels.png");
image-resolution: 100%;
}

    :root{
    --color-darkblue-alpha:rgb(8, 190, 245);
}
#title{
    border-block-color: green;
    flood-color: chartreuse;
    color: rgb(240, 14, 101);

}
body{
    text-align: center;
    
}
#description{align-self: center;
    color: rgb(200, 14, 101);

}
form {
    background: var(--color-darkblue-alpha);
    padding: 2.5rem 0.625rem;
    border-radius: 0.25rem;
    inline-size: 400px;
    text-align: left;
   
  margin: auto;
  }

#name-label{
    
    display:block ;

}
#email-label{
    display: block;
    margin-top: 15px;

}
#number-label{
    display: block;
    margin-top: 15px;
}
#name{align-self: left;
    font:inherit;
    width: 60%;
    align-self: left;
    border:darkkhaki;
    border-radius: 5px;
    padding:5px;
    margin:5px;
    text-align: center;

    
}
#email{align-self: center;
    font:inherit;
    width: 60%;
    align-self: left;
    border:darkkhaki;
    border-radius: 5px;
    padding:5px;
    margin:5px;
    text-align: center;

    

}
#number{align-self: center;
    font:inherit;
    width: 60%;
    align-self: left;
    border:darkkhaki;
    border-radius: 5px;
    padding:5px;
    margin:5px;
    text-align: center;


}
#dropdown{align-self: center;
    font:inherit;
    width: 60%;
    align-self: left;
    border:darkkhaki;
    border-radius: 5px;
    padding:5px;
    margin:5px;
    text-align: center;


}
#submit{display: block;
    width: 50%;
    padding: 0.75rem;
    background: lightgreen;
    color: inherit;
    border-radius: 2px;
    cursor: pointer;
    text-align: center;
  }
}

.content{
    font:inherit;
    width: 60%;
    align-self: left;
    border:darkkhaki;
    border-radius: 5px;
    padding:5px;
   ...