Responsive Styling - Copy this React, Tailwind Component to your project
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #121212; color: white; font-family: "Poppins", sans-serif; } nav { display: flex; justify-content: space-around; align-items: center; height: 69px; background-color: #1f1f1f; } nav ul { display: flex; justify-content: center; } nav ul li { list-style: none; margin: 0 23px; } nav ul li a { text-decoration: none; color: rgb(255, 255, 255); } nav ul li a:hover { color: #a29bfe; } .left { font-size: 1.5rem; color: #a29bfe; } .firstSection { display: flex; justify-content: space-around; align-items: center; margin: 110px 0; } .firstSection>div { width: 30%; } .leftSection { font-size: 3rem; margin: 30px 0; } .leftSection .buttons { padding: auto; margin-top: 20px; } .leftSection .btn { background-color: #6c5ce7; color: white; border: none; padding: 12px; border-radius: 12px; font-size: 1rem; cursor: pointer; margin: 10px; } .leftSection .btn:hover { background-color: #a29bfe; } .rightSection img { width: 90%; margin: 10px 0px; border-radius: 40px; box-shadow: 0 0 25px rgba(162, 155, 254, 0.65); } .text-purple { color: #a29bfe; } .text-grey { color: #a29bfe; } #element { color: #a29bfe; } .secondSection { max-width: 80vw; margin: auto; height: 60vw; } .secondSection h1 { font-size: 1.5rem; } .secondSection .box { background-color: white; width: 80vw; height: 2px; margin: 55px 0; display: flex; } .secondSection .vertical { height: 95px; width: 1px; background-color: white; margin: 0 80px; } .image-top { width: 35px; position: relative; top: -35px; left: -17px; } div.period { position: relative; top: 60px; width: 130px; font-size: 9px; } .vertical-title { position: relative; top: 56px; width: 150px; font-size: 13px; } .vertical-desc { position: relative; top: 68px; color: #4f4e66; width: 140px; font-size: 10px; } footer { background-color: #1f1f1f; } .footer { display: flex; padding: 25px 125px; justify-content: space-evenly; } .footer ul { list-style: none; } .footer>div { width: 250px; } footer .footer-reservedRights { text-align: center; color: grey; font-size: 10px; padding: 10px 0; } .contact-form-container { max-width: 550px; margin: 50px auto 150px auto; padding: 30px; background-color: #1e1e1e; border-radius: 20px; box-shadow: 0 10px 30px rgba(162, 155, 254, 0.12); color: #fff; } .contact-form-container h2 { text-align: center; margin-bottom: 20px; color: #a29bfe; font-size: 24px; font-weight: 700; } .form-group { margin-bottom: 20px; position: relative; } .form-group label { display: block; margin-bottom: 8px; color: #a29bfe; font-weight: 500; transition: all 0.3s ease; } .form-group input, .form-group textarea { width: 100%; padding: 15px; border: none; border-radius: 10px; background-color: #2c2c2c; color: #fff; font-size: 16px; font-family: "Poppins", sans-serif; } .form-group input:focus, .form-group textarea:focus { outline: none; background-color: #333; box-shadow: 0 0 10px rgba(162, 155, 254, 0.5); } .form-group button { width: 100%; padding: 15px; border: none; border-radius: 10px; background-color: #a29bfe; color: #fff; font-size: 18px; font-weight: 700; cursor: pointer; transition: background-color 0.3s ease; } .form-group button:hover { background-color: #6c5ce7; } can you make this responsive
