About Me - Copy this React, Tailwind Component to your project
<!DOCTYPE-html>-<html-lang="en">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>About-Me</title>-<style>-body-{-font-family:-'Arial',-sans-serif;-margin:-0;-padding:-0;-line-height:-1.6;-color:-#333;-background-color:-#f9f9f9;-}-header-{-background:-linear-gradient(90deg,-#ff3e3e,-#ff6e6e);-color:-white;-padding:-40px-0;-text-align:-center;-font-size:-32px;-font-weight:-bold;-box-shadow:-0-4px-10px-rgba(0,-0,-0,-0.2);-}-nav-{-background:-#ffffff;-padding:-10px-0;-box-shadow:-0-2px-5px-rgba(0,-0,-0,-0.1);-}-nav-ul-{-display:-flex;-justify-content:-center;-list-style:-none;-padding:-0;-margin:-0;-}-nav-ul-li-{-margin:-0-15px;-}-nav-ul-li-a-{-text-decoration:-none;-color:-#ff3e3e;-font-weight:-bold;-font-size:-16px;-transition:-color-0.3s;-}-nav-ul-li-a:hover-{-color:-#ff6e6e;-}-.container-{-width:-90%;-max-width:-1200px;-margin:-50px-auto;-background:-white;-padding:-50px;-border-radius:-15px;-box-shadow:-0-4px-20px-rgba(0,-0,-0,-0.1);-}-.hero-{-text-align:-center;-margin-bottom:-40px;-}-.hero-h1-{-font-size:-42px;-color:-#ff3e3e;-margin-bottom:-15px;-}-.hero-p-{-font-size:-20px;-color:-#555;-}-.services-{-display:-grid;-grid-template-columns:-repeat(auto-fit,-minmax(300px,-1fr));-gap:-30px;-margin-top:-40px;-}-.service-{-background:-#f4f4f9;-border-radius:-10px;-padding:-25px;-box-shadow:-0-4px-15px-rgba(0,-0,-0,-0.1);-text-align:-center;-transition:-transform-0.3s,-box-shadow-0.3s;-}-.service:hover-{-transform:-translateY(-10px);-box-shadow:-0-6px-20px-rgba(0,-0,-0,-0.2);-}-.service-img-{-width:-60px;-height:-60px;-margin-bottom:-20px;-}-.service-h3-{-font-size:-22px;-color:-#ff3e3e;-margin-bottom:-15px;-}-.service-p-{-font-size:-18px;-color:-#666;-}-footer-{-text-align:-center;-padding:-30px;-background:-linear-gradient(90deg,-#ff5252,-#ff3e3e);-color:-white;-margin-top:-50px;-font-size:-16px;-box-shadow:-0--2px-10px-rgba(0,-0,-0,-0.1);-}-footer-a-{-color:-#ffe600;-text-decoration:-none;-font-weight:-bold;-}-footer-a:hover-{-text-decoration:-underline;-}-</style>-</head>-<body>-<header>-About-Me-</header>-<nav>-<ul>-<li><a-href="#about">About</a></li>-<li><a-href="#services">Services</a></li>-<li><a-href="#contact">Contact</a></li>-</ul>-</nav>-<div-class="container">-<section-class="hero"-id="about">-<h1>Hello,-I’m-Robert-Fox</h1>-<p>Designer-&-Developer-crafting-modern,-user-friendly-digital-experiences.</p>-</section>-<section-class="services"-id="services">-<div-class="service">-<img-src="https://via.placeholder.com/60"-alt="Responsive-Design">-<h3>Responsive-Design</h3>-<p>I-create-accessible-and-responsive-websites-optimized-for-all-devices.</p>-</div>-<div-class="service">-<img-src="https://via.placeholder.com/60"-alt="E-Commerce">-<h3>E-Commerce-Solutions</h3>-<p>Building-fully-functional-online-stores-tailored-to-your-business.</p>-</div>-<div-class="service">-<img-src="https://via.placeholder.com/60"-alt="Mobile-Apps">-<h3>Mobile-Applications</h3>-<p>Designing-and-developing-apps-for-iOS-and-Android-platforms.</p>-</div>-</section>-</div>-<footer>-<p>©-2024-Robert-Fox.-All-Rights-Reserved.-<a-href="#">Privacy-Policy</a></p>-</footer>-</body>-</html>-i-can-you-compelet-wed-here
