React30-Project28: Building a VR Headset Launch Website with Tailwind CSS in React
Introduction
Tailwind CSS, a utility-first CSS framework, simplifies this process by providing a robust set of pre-defined styles. In this article, we’ll explore the creation of a VR headset launch website using Tailwind CSS in a React application.
Goals
To build a VR launch website using Tailwind CSS as per UI shown below:
Prerequisites
Ensure you have the following prerequisites before diving into the implementation:
- Node.js and npm: Install Node.js from official website to get npm.
- Create React App: Set up a new React project using Create React App (CRA):
npx create-react-app vr-website
Implementation
Project Structure
Organize your project structure. Inside the src folder, you might have the following structure:
src
|-- components
| |-- Header.js
| |-- HeroSection.js
| |-- FeaturesSection.js
| |-- PricingSection.js
|-- App.js
|-- index.js
Building Components
- Header Component (Header.js):
import React from "react";
const Header = () => {
return (
<header className="bg-gray-800 text-white py-4">
<div className="container mx-auto flex justify-between items-center">
<div className="text-xl font-bold">VR Launch</div>
<nav>
<ul className="flex space-x-4">
<li className="hover:text-gray-300 cursor-pointer">Home</li>
<li className="hover:text-gray-300 cursor-pointer">Features</li>
<li className="hover:text-gray-300 cursor-pointer">Pricing</li>
</ul>
</nav>
</div>
</header>
);
};
export default Header;
The header includes a navigation bar with a simple logo and links.
Tailwind CSS classes are used for styling, such as `bg-gray-800` for the background color.
2. HeroSection Component (HeroSection.js):
import React from "react";
const HeroSection = () => {
return (
<section className="bg-blue-700 text-white py-16">
<div className="container mx-auto flex flex-col md:flex-row items-center md:items-start md:justify-between">
<div className="text-center md:text-left md:w-1/2">
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-4">
Experience Virtual Reality Like Never Before
</h1>
<p className="text-lg md:text-xl lg:text-2xl mb-8">
Immerse yourself in a world of possibilities with our cutting-edge
VR headset.
</p>
<button className="bg-white text-blue-700 py-2 px-6 rounded-full hover:bg-gray-300">
Learn More
</button>
</div>
<div className="mt-8 md:mt-0 md:w-1/2">
<img
src={"/images/vrImage.jpg"}
alt="VR Headset"
className="mx-auto md:mx-4 w-full md:w-auto rounded-md shadow-md"
/>
</div>
</div>
</section>
);
};
export default HeroSection;
Add a VR headset image in `public/images` folder. The image used here is generated using AI from Copilot section of Microsoft Bing App.
The hero section contains a prominent heading, a brief description, and a call-to-action button.
Responsive font sizes (text-4xl, md:text-5xl, lg:text-6xl) ensure a consistent look on various devices.
3. FeaturesSection Component (FeaturesSection.js):
import React from "react";
const FeaturesSection = () => {
const features = [
{
icon: "🚀",
title: "High Performance",
description: "Experience smooth and lag-free VR interactions."
},
{
icon: "👀",
title: "Crystal Clear Display",
description:
"See every detail with our high-resolution VR display technology."
},
{
icon: "🎮",
title: "Intuitive Controls",
description:
"Effortlessly navigate virtual worlds with our easy-to-use controls."
},
{
icon: "💽",
title: "Cutting edge hardware",
description: "Custom made processor and vision processing unit"
}
];
return (
<section className="bg-gray-200 py-16">
<div className="container mx-auto text-center">
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-8">
Key Features
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature, index) => (
<div key={index} className="p-4 border rounded-md">
<div className="text-4xl mb-4">{feature.icon}</div>
<h3 className="text-xl font-bold mb-2">{feature.title}</h3>
<p>{feature.description}</p>
</div>
))}
</div>
</div>
</section>
);
};
export default FeaturesSection;
Features are displayed in a grid layout with icons, titles, and descriptions.
Tailwind’s responsive grid classes (grid-cols-1, md:grid-cols-2, lg:grid-cols-3) are used for layout adjustments.
4. PricingSection Component (PricingSection.js):
// PricingSection.js
import React from "react";
const PricingSection = () => {
const pricingPlans = [
{
name: "Basic",
price: 49.99,
features: ["VR Experience", "Limited Content"]
},
{
name: "Standard",
price: 79.99,
features: ["Full Content Access", "Interactive Games"]
},
{
name: "Premium",
price: 129.99,
features: ["Exclusive Content", "Priority Support"]
}
];
return (
<section className="bg-gray-200 py-16">
<div className="container mx-auto text-center">
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-8">
Pricing Plans
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{pricingPlans.map((plan, index) => (
<div key={index} className="p-4 border rounded-md">
<h3 className="text-2xl font-bold mb-2">{plan.name}</h3>
<p className="text-3xl font-bold mb-4">${plan.price}</p>
<ul className="text-center">
{plan.features.map((feature, idx) => (
<li key={idx} className="mb-2">
{feature}
</li>
))}
</ul>
<button className="bg-blue-700 text-white py-2 px-4 rounded-full mt-4 hover:bg-blue-600">
Choose Plan
</button>
</div>
))}
</div>
</div>
</section>
);
};
export default PricingSection;
Styling with Tailwind CSS
Add below script in `public/index.html` file to integrate Tailwindcss in your project:
<script src="https://cdn.tailwindcss.com"></script>
Integrating Components in App
Now, integrate these components into your App.js file:
import Header from "./components/Header";
import HeroSection from "./components/HeroSection";
import FeaturesSection from "./components/FeaturesSection";
import PricingSection from "./components/PricingSection";
export default function App() {
return (
<div className="App">
<Header />
<HeroSection />
<FeaturesSection />
<PricingSection />
</div>
);
}
You should now see the complete website when you open it in browser.
Live Demo: Codesandbox
Conclusion
In this tutorial, we explored the process of building a VR headset launch website using Tailwind CSS in a React application. Tailwind’s utility-first approach and extensive set of predefined styles make it a powerful tool for rapid and maintainable development. The project structure and component-based approach facilitate scalability and ease of maintenance. Feel free to extend this project by adding more sections, enhancing styling, and incorporating additional Tailwind CSS classes to suit your VR headset launch website’s design. Have a nice day ahead 😁
Checkout my YouTube channel for more content:
