Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Create blog example in tailwind #1

Draft
wants to merge 2 commits into
base: development
Choose a base branch
from
Draft

[WIP] Create blog example in tailwind #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f7f98d3
feat (example-blog): create blog example in tailwind
GuzmanBellon Aug 29, 2024
0952a0d
doc (example-blog): add a README for the example
GuzmanBellon Aug 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions frontend/example-blog-tailwind/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
12 changes: 12 additions & 0 deletions frontend/example-blog-tailwind/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# Example Blog Tailwing

This is an example blog built with [Tailwind CSS](https://tailwindcss.com/) and [Vite](https://vitejs.dev/).
The code was generated in part with the help of Anthropic Claude Sonnet 3.5. It's part of an experiment on how generative AI can be used to change the development workflow of web applications.

## Installation

```bash
npm install
npm run dev # for development
npm run build # for production
```
173 changes: 173 additions & 0 deletions frontend/example-blog-tailwind/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hackathon and Open Source Blog</title>
</head>

<body class="font-sans bg-gray-100">
<script type="module" src="./main.js"></script>
<header class="bg-white shadow-md">
<nav
class="container mx-auto px-4 py-4 flex justify-between items-center"
>
<a href="#" class="text-2xl font-bold text-blue-600">HackBlog</a>
<ul class="flex space-x-4">
<li>
<a href="#" class="text-gray-700 hover:text-blue-600">Home</a>
</li>
<li>
<a href="#" class="text-gray-700 hover:text-blue-600">Hackathons</a>
</li>
<li>
<a href="#" class="text-gray-700 hover:text-blue-600"
>Open Source</a
>
</li>
<li>
<a href="#" class="text-gray-700 hover:text-blue-600">About</a>
</li>
</ul>
</nav>
</header>

<main>
<section class="hero relative h-96">
<img
src="https://placehold.it/1200x400"
alt="Hackathon"
class="w-full h-full object-cover"
/>
<div
class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center"
>
<h1 class="text-4xl md:text-6xl text-white font-bold text-center">
Empowering Innovators<br />Through Code
</h1>
</div>
</section>

<section class="container mx-auto px-4 py-8">
<h2 class="text-3xl font-bold mb-6">Latest Posts</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<article class="bg-white rounded-lg shadow-md overflow-hidden">
<img
src="https://placehold.it/400x200"
alt="Post 1"
class="w-full h-48 object-cover"
/>
<div class="p-4">
<h3 class="text-xl font-semibold mb-2">
Upcoming Hackathon: Code for Good
</h3>
<p class="text-gray-600">
Join us for a weekend of coding and innovation...
</p>
<a
href="#"
class="mt-4 inline-block text-blue-600 hover:underline"
>Read more</a
>
</div>
</article>
<article class="bg-white rounded-lg shadow-md overflow-hidden">
<img
src="https://placehold.it/400x200"
alt="Post 2"
class="w-full h-48 object-cover"
/>
<div class="p-4">
<h3 class="text-xl font-semibold mb-2">
Getting Started with Open Source
</h3>
<p class="text-gray-600">
Learn how to contribute to open source projects...
</p>
<a
href="#"
class="mt-4 inline-block text-blue-600 hover:underline"
>Read more</a
>
</div>
</article>
<article class="bg-white rounded-lg shadow-md overflow-hidden">
<img
src="https://placehold.it/400x200"
alt="Post 3"
class="w-full h-48 object-cover"
/>
<div class="p-4">
<h3 class="text-xl font-semibold mb-2">
Success Story: From Hackathon to Startup
</h3>
<p class="text-gray-600">
Discover how a hackathon project turned into a thriving
business...
</p>
<a
href="#"
class="mt-4 inline-block text-blue-600 hover:underline"
>Read more</a
>
</div>
</article>
</div>
</section>
</main>

<footer class="bg-gray-800 text-white py-8">
<div class="container mx-auto px-4">
<div class="flex flex-wrap justify-between">
<div class="w-full md:w-1/3 mb-6 md:mb-0">
<h4 class="text-xl font-semibold mb-4">About Us</h4>
<p class="text-gray-400">
We promote innovation through hackathons and open source
contributions.
</p>
</div>
<div class="w-full md:w-1/3 mb-6 md:mb-0">
<h4 class="text-xl font-semibold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li>
<a href="#" class="text-gray-400 hover:text-white">Home</a>
</li>
<li>
<a href="#" class="text-gray-400 hover:text-white"
>Hackathons</a
>
</li>
<li>
<a href="#" class="text-gray-400 hover:text-white"
>Open Source</a
>
</li>
<li>
<a href="#" class="text-gray-400 hover:text-white">Contact</a>
</li>
</ul>
</div>
<div class="w-full md:w-1/3">
<h4 class="text-xl font-semibold mb-4">Stay Connected</h4>
<form class="flex">
<input
type="email"
placeholder="Enter your email"
class="px-4 py-2 w-full rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
/>
<button
type="submit"
class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600"
>
Subscribe
</button>
</form>
</div>
</div>
<div class="mt-8 text-center text-gray-400">
<p>&copy; 2024 HackBlog. All rights reserved.</p>
</div>
</div>
</footer>
</body>
</html>
3 changes: 3 additions & 0 deletions frontend/example-blog-tailwind/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
1 change: 1 addition & 0 deletions frontend/example-blog-tailwind/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import "./main.css";
Loading