 |
Discover the art of sleek and modern web design with our latest project – a Simple Tailwind CSS Portfolio. Dive into the world of Tailwind CSS and explore how this powerful framework can transform your web development journey. This meticulously crafted portfolio showcases the perfect blend of creativity and functionality, offering a stunning visual experience for both designers and developers.
Our project source code provides you with a valuable resource to kickstart your own portfolio design. Whether you're a beginner looking to learn the ropes of Tailwind CSS or an experienced developer seeking inspiration, this codebase is your gateway to creating visually striking, responsive, and user-friendly websites. With clean, concise code and intuitive design principles, you'll be able to customize and adapt this portfolio to reflect your unique style and skills effortlessly.
📌 What I have used to create this project:
- HTML
- Tailwind CSS
- Few Line CSS
Source Code
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-900">
<!-- Header Area Start -->
<header class="sticky top-0 z-10">
<nav class="bg-gray-900 shadow-xl">
<div class="container mx-auto">
<div class="sm:flex justify-between items-center py-5">
<div class="flex items-center justify-between ">
<div class="text-center mb-4">
<a class="text-white text-3xl font-bold" href="https://linktr.ee/subrotobasak"><span class="text-orange-500">C</span>razy
Cod<span class="text-orange-500">ers</span></a>
</div>
<butto id="mobile_icon" class="text-white mr-16 sm:hidden cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</butto>
</div>
<div class="">
<ul id="main_menu" class="hidden sm:flex text-white text-center text-xl border-t sm:border-none">
<li class="mt-4 sm:mt-0"><a class="hover:text-orange-500 px-6" href="#">Home</a></li>
<li><a class="hover:text-orange-500 px-6" href="#">Services</a></li>
<li><a class="hover:text-orange-500 px-6" href="#">Portfolio</a></li>
<li><a class="hover:text-orange-500 px-6" href="#">Blogs</a></li>
<li class="mt-5 sm:mt-0"><a class="ss-btn-primary" href="https://linktr.ee/subrotobasak">Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<!-- Header Area End -->
<!-- Main Area Start -->
<main class="container mx-auto">
<!-- Hero Area Start -->
<section class="hero-section mt-5 sm:mt-0">
<div class=" border border-violet-950 border-t-0 h-[80vh] sm:flex items-center justify-around">
<div class="text-center ">
<h1 class="text-white text-2xl sm:text-5xl mb-5 sm:mb-16 ">Unlock Your Creativity:<br/>with Crazy Coders</h1>
<a class="ss-btn-primary" href="https://linktr.ee/subrotobasak">Contact Me</a>
</div>
<div class="">
<img class="w-full animate-pulse" src="./images/hero-image.png" alt="" srcset="">
</div>
</div>
</section>
<!-- Hero Area End -->
<!-- Services Area Start -->
<section class="my-20 mx-6 sm:mx-0">
<h2 class="text-orange-500 text-3xl text-center mb-12 animate-pulse">Our Services</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10">
<div class="ss-service-card">
<img src="./images/frontend.png" alt="" srcset="">
<h4>Front End Development</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur, placeat.</p>
</div>
<div class="ss-service-card">
<img src="./images/backend.png" alt="" srcset="">
<h4>Back End Development</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur, placeat.</p>
</div>
<div class="ss-service-card">
<img src="./images/wordpress.png" alt="" srcset="">
<h4>WordPress Customization</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur, placeat.</p>
</div>
<div class="ss-service-card">
<img src="./images/leandingpage.png" alt="" srcset="">
<h4>Landing Page Design</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur, placeat.</p>
</div>
<div class="ss-service-card">
<img src="./images/figmatohtml.png" alt="" srcset="">
<h4>Figma to HTML CSS</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur, placeat.</p>
</div>
<div class="ss-service-card">
<img src="./images/psdtohtml.png" alt="" srcset="">
<h4>PSD to HTML</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur, placeat.</p>
</div>
</div>
</section>
<!-- Services Area End -->
<!-- My Clients Section Start -->
<section class="bg-slate-950 py-16 md:py-48">
<div class="lg:flex items-center justify-center text-white sm:justify-around">
<div class="text-3xl text-center mb-8 lg:mb-0">
<h2 class="text-orange-500 mb-8 animate-bounce">My Clients</h2>
<p>My take care of <br> more <span class="underline decoration-orange-500 underline-offset-8">than 100+</span> <br> customers</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-16 sm:gap-8 lg:gap-12 items-center justify-center mx-14">
<div>
<img src="./images/client-01.png" alt="" srcset="">
<h3>One Pluse</h3>
</div>
<div>
<img src="./images/client-02.png" alt="" srcset="">
<h3>Tencent</h3>
</div>
<div>
<img src="./images/client-03.png" alt="" srcset="">
<h3>Apple</h3>
</div>
<div>
<img src="./images/client-04.png" alt="" srcset="">
<h3>Microsoft</h3>
</div>
<div>
<img src="./images/client-05.png" alt="" srcset="">
<h3>Lenovo</h3>
</div>
<div>
<img src="./images/client-06.png" alt="" srcset="">
<h3>Huawei</h3>
</div>
<div>
<img src="./images/client-07.png" alt="" srcset="">
<h3>Nexus</h3>
</div>
<div>
<img src="./images/client-08.png" alt="" srcset="">
<h3>Tesla</h3>
</div>
<div>
<img src="./images/client-09.png" alt="" srcset="">
<h3>Brave</h3>
</div>
</div>
</div>
</section>
<!-- My Clients Section End -->
<!-- Form Section Stsrt -->
<section class="my-20 py-16 md:py-24 bg-gray-800">
<div class="items-center justify-center">
<h3 class="text-center text-orange-500 text-xl sm:text-3xl mb-12 animate-pulse">Ask a Question</h3>
<form>
<input class="block mx-auto w-11/12 sm:w-1/2 rounded h-12 border-2 border-orange-500 placeholder:italic px-5 mb-10" type="email" placeholder="Enter Your Email">
<textarea class="block mx-auto w-11/12 sm:w-1/2 rounded h-52 border-2 border-orange-500 placeholder:italic px-5 py-5" placeholder="Your Queries" ></textarea>
<button class="block mx-auto ss-btn-primary mt-6">Send Now</button>
</form>
</div>
</section>
<!-- Form Section End -->
<!-- Price Section Start -->
<section>
<h3 class="text-center text-orange-500 text-xl sm:text-3xl mb-12 animate-pulse">Choose Your Web Development Plan</h3>
<div class="text-white sm:grid sm:grid-cols-2 lg:grid-cols-3 gap-10 justify-center items-center mx-6 lg:mx-0">
<div class="border px-8 py-8 my-5">
<h5>Basic Plan</h5>
<h2> $<span class="text-3xl font-bold">199</span>/Month</h2>
<hr class="my-10">
<ul class="list-disc list-inside leading-10 text-xl">
<li>Front End Development</li>
<li>Back End Development</li>
<li>WordPress Customization</li>
<li>Landing Page Design</li>
<li>Figma to HTML CSS</li>
<li>PSD to HTML</li>
</ul>
<button class="ss-btn-primary mt-5">Purchase</button>
</div>
<div class="border px-8 py-8 my-5">
<h5>Advance Plan</h5>
<h2> $<span class="text-3xl font-bold">299</span>/Month</h2>
<hr class="my-10">
<ul class="list-disc list-inside leading-10 text-xl">
<li>Front End Development</li>
<li>Back End Development</li>
<li>WordPress Customization</li>
<li>Landing Page Design</li>
<li>Figma to HTML CSS</li>
<li>PSD to HTML</li>
</ul>
<button class="ss-btn-primary mt-5">Purchase</button>
</div>
<div class="border px-8 py-8">
<h5>Pro Plan</h5>
<h2> $<span class="text-3xl font-bold">399</span>/Month</h2>
<hr class="my-10">
<ul class="list-disc list-inside leading-10 text-xl">
<li>Front End Development</li>
<li>Back End Development</li>
<li>WordPress Customization</li>
<li>Landing Page Design</li>
<li>Figma to HTML CSS</li>
<li>PSD to HTML</li>
</ul>
<button class="ss-btn-primary mt-5">Purchase</button>
</div>
</div>
</section>
<!-- Price Section End -->
<!-- Newsletter Area Start -->
<section class="newsletter-area bg-lime-950 my-10 sm:my-16 md:my-20 lg:my-32 py-10 sm:py-16 md:py-20 bg-no-repeat bg-left">
<div class="sm:flex justify-center items-center text-white gap-10 sm:gap-16 md:gap-20 lg:gap-32">
<div class="text-center mb-10 sm:mb-0 sm:border-r-2 sm:pr-20">
<h2 class="text-xl">Newsletter Subscription</h2>
<p>Get subscribed to our newsletter & receive latest lorem update</p>
</div>
<div class="flex justify-center items-center gap-1">
<input class="h-10 border-none px-2" type="email" placeholder="E-mail">
<button class="bg-red-900 px-5 py-2 hover:bg-red-600">Subscribe</button>
</div>
</div>
</section>
<!-- Newsletter Area End -->
</main>
<!-- Main Area End -->
<!-- Footer Area Start -->
<footer>
<div class="container mx-auto text-center sm:text-left">
<div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 text-white place-items-center gap-y-12 lg:gap-y-0">
<div>
<h2 class="text-xl sm:text-2xl mb-3"> My Account </h2>
<ul class="leading-10">
<li> <a href="#"> Creator Dashboard </a> </li>
<li> <a href="#"> Wallet </a> </li>
<li> <a href="#"> Create Item </a> </li>
<li> <a href="#"> My Account </a> </li>
</ul>
</div>
<div>
<h2 class="text-xl sm:text-2xl mb-3"> Web Links </h2>
<ul class="leading-10">
<li> <a href="#"> Collections </a> </li>
<li> <a href="#"> Item Details </a> </li>
<li> <a href="#"> Rankings </a> </li>
<li> <a href="#"> User Profile </a> </li>
</ul>
</div>
<div>
<h2 class="text-xl sm:text-2xl mb-3"> Community </h2>
<ul class="leading-10">
<li> <a href="#"> Blog Category </a> </li>
<li> <a href="#"> Blog Author </a> </li>
<li> <a href="#"> Blog </a> </li>
<li> <a href="#"> Blog Details </a> </li>
</ul>
</div>
<div>
<h2 class="text-xl sm:text-2xl mb-3"> Contact </h2>
<ul class="leading-10">
<li> <a href="#">Bangladesh - Jhenaidah</a> </li>
<li> <a href="#"> Subroto Basak Shawon </a> </li>
<li> <a href="#"> example@gmail.com </a> </li>
<li> <a href="#"> Phone: +88010101010 </a> </li>
</ul>
</div>
</div>
<hr class="my-8">
<div class="text-white sm:flex justify-between mb-5">
<p> © Copyright - 2023 - Designed by <a class="text-orange-600" href="https://linktr.ee/subrotobasak">Subroto Basak Shawon</a></p>
<p> Privacy Policy | Term of Service </p>
</div>
</div>
</footer>
<!-- Footer Area End -->
<!-- Script -->
<script type="module" src="/scripts/script.js"></script>
</body>
</html>
input.css
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Common CSS */
.ss-btn-primary {
@apply rounded py-2 px-4 font-semibold text-orange-500 text-xl border border-white hover:text-white hover:bg-orange-500 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2;
}
.ss-service-card {
@apply text-white bg-gray-800 p-8 rounded-lg text-center border-4 border-[#1F2937] hover:border-indigo-700 hover:animate-pulse cursor-pointer;
> img {
@apply w-1/2 mx-auto rounded;
}
> h4 {
@apply my-5 text-lg underline underline-offset-8;
}
}
.newsletter-area {
background-image: url(../images/subscribe-bg.png);
}
📌 Important file URL:
🔗 Source Code: https://github.com/subrotobasak/Simple-Tailwind-CSS-Portfolio-Design.git
👁️🗨️ Live Link: https://simple-tailwind-portfolio-design.netlify.app/
0 Comments