JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enterprise DNA</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<style>
.brand-color {
background-color: #302AE6;
}
.brand-color-light {
background-color: #536390;
}
.accent-color {
background-color: #F9A826;
}
.accent-color-light {
background-color: #F2E96B;
}
</style>
</head>
<body class="font-sans">
<div class="min-h-screen flex flex-col items-center justify-center bg-gray-100">
<!-- Main Container -->
<div class="container mx-auto p-4">
<!-- Top Navigation & Logo -->
<nav class="flex justify-between items-center py-4">
<a href="#" class="text-3xl font-bold text-gray-700">ENTERPRISE DNA</a>
<div class="space-x-4">
<a href="#" class="text-gray-600 hover:text-gray-900">Discover</a>
<!-- ... other navigation links ... -->
<a href="#" class="text-gray-600 hover:text-gray-900">Login</a>
<a href="#" class="px-4 py-2 rounded bg-brand-color text-white hover:bg-brand-color-light transition duration-300">Get Started</a>
</div>
</nav>
<!-- Hero Section -->
<div class="grid grid-cols-2 gap-4 mt-10">
<!-- Content -->
<div class="space-y-4">
<h1 class="text-5xl font-bold text-gray-800 leading-tight">Future-Proof Your Career<br>Master Data Skills<br>Upskill in AI</h1>
<ul class="list-disc space-y-2 ml-5 text-gray-600">
<li>Join 220,000+ learning the latest data and AI skills</li>
<li>Learn Faster with proven, personalized training pathways</li>
<li>Build Experience with live data exercises & challenges</li>
</ul>
<div class="mt-6">
...