Skip to content

Instantly share code, notes, and snippets.

@phawk

phawk/chat-gpt-tailwind-css-markup.html

Created August 6, 2024 19:10
Show Gist options
  • Save phawk/0ce89715366cc79f339944d7d08aa275 to your computer and use it in GitHub Desktop.
Save phawk/0ce89715366cc79f339944d7d08aa275 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
chat-gpt-tailwind-css-markup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pay Here</title>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
</head>
<body class="font-sans">
<header class="bg-white shadow-sm">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<a href="#" class="text-2xl font-bold text-blue-600">PAY HERE</a>
<nav class="space-x-6 hidden md:flex">
<a href="#" class="text-gray-600 hover:text-blue-600">Features</a>
<a href="#" class="text-gray-600 hover:text-blue-600">Pricing</a>
<a href="#" class="text-gray-600 hover:text-blue-600">Blog</a>
<a href="#" class="text-gray-600 hover:text-blue-600">Merchant login</a>
</nav>
<a href="#" class="bg-green-500 text-white px-4 py-2 rounded-md hidden md:block">SIGN UP</a>
</div>
</header>
<section class="bg-white py-12">
<div class="max-w-7xl mx-auto px-4 flex flex-col md:flex-row items-center md:space-x-8">
<!-- Left Content -->
<div class="md:w-1/2 text-center md:text-left">
<h1 class="text-3xl md:text-4xl font-bold text-gray-900">Tired of chasing clients for payments?</h1>
<p class="mt-4 text-gray-600">Create membersites and charge your clients automatically every month.</p>
<div class="mt-6 flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 justify-center md:justify-start">
<a href="#" class="bg-green-500 text-white px-6 py-3 rounded-md">SIGN UP</a>
<a href="#" class="bg-white border border-gray-300 text-gray-700 px-6 py-3 rounded-md">MERCHANT LOGIN</a>
</div>
<div class="mt-8 flex items-center">
<div class="w-12 h-12 rounded-full bg-gray-200 overflow-hidden mr-4"></div>
<div class="text-sm text-gray-500">
<p>“PayHere saves me a lot of time and my clients love how simple it is”</p>
<p class="font-bold text-gray-900">Natalie Abusow</p>
<p><a href="mailto:natalieabusow.com" class="text-blue-600">natalieabusow.com</a></p>
</div>
</div>
</div>
<!-- Right Content (Placeholder for Image) -->
<div class="md:w-1/2 mt-10 md:mt-0">
<div class="bg-blue-600 h-64 rounded-lg"></div>
</div>
</div>
</section>
<section class="py-12 bg-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold text-gray-900">The best payment platform</h2>
<p class="mt-4 text-gray-600 max-w-xl mx-auto">Nullam orci lorem, auctor ac quam sit amet, consequat porttitor leo. Pellentesque habitant morbi tristique senectus et netus.</p>
<div class="mt-8 flex flex-col md:flex-row justify-center md:space-x-8 space-y-8 md:space-y-0">
<!-- Feature 1 -->
<div class="flex flex-col items-center">
<div class="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mb-4">
<span class="text-blue-600 text-3xl">$</span>
</div>
<h3 class="text-xl font-bold text-gray-900">One-off payments</h3>
<p class="mt-2 text-gray-600 max-w-xs">Easy to manage one-off payments for your clients.</p>
</div>
<!-- Feature 2 -->
<div class="flex flex-col items-center">
<div class="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mb-4">
<span class="text-blue-600 text-3xl">🔄</span>
</div>
<h3 class="text-xl font-bold text-gray-900">Recurring payments</h3>
<p class="mt-2 text-gray-600 max-w-xs">Set up recurring payments to automate your revenue.</p>
</div>
<!-- Feature 3 -->
<div class="flex flex-col items-center">
<div class="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mb-4">
<span class="text-blue-600 text-3xl">❤️</span>
</div>
<h3 class="text-xl font-bold text-gray-900">Simple payments</h3>
<p class="mt-2 text-gray-600 max-w-xs">User-friendly platform for hassle-free payments.</p>
</div>
</div>
</div>
</section>
<section class="bg-blue-700 py-12">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold text-white">The features</h2>
<p class="mt-4 text-white">Increase online sales and improve marketing using our simple, bespoke payments platform</p>
<div class="mt-8 flex flex-col md:flex-row justify-center md:space-x-8 space-y-8 md:space-y-0">
<!-- Feature 1 -->
<div class="flex flex-col items-center">
<div class="w-24 h-24 bg-blue-500 rounded-lg mb-4"></div> <!-- Placeholder for the icon -->
<h3 class="text-xl font-bold text-white">Optional website</h3>
<p class="mt-2 text-white max-w-xs">We can provide a custom website to sell your services and products.</p>
</div>
<!-- Feature 2 -->
<div class="flex flex-col items-center">
<div class="w-24 h-24 bg-blue-500 rounded-lg mb-4"></div> <!-- Placeholder for the icon -->
<h3 class="text-xl font-bold text-white">Merchant admin</h3>
<p class="mt-2 text-white max-w-xs">Manage payments, setup products and memberships, and forecast your future revenue.</p>
</div>
<!-- Feature 3 -->
<div class="flex flex-col items-center">
<div class="w-24 h-24 bg-blue-500 rounded-lg mb-4"></div> <!-- Placeholder for the icon -->
<h3 class="text-xl font-bold text-white">Integration</h3>
<p class="mt-2 text-white max-w-xs">We can integrate into your existing website and social media platforms.</p>
</div>
</div>
</div>
</section>
<section class="py-12 bg-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-2xl font-bold text-gray-900">Pricing</h2>
<p class="mt-4 text-gray-600">We will help you integrate PayHere with your website and provide you with sales and marketing advice to help grow your online business.</p>
<div class="mt-4 space-x-4 text-gray-600">
<span>No contracts</span>
<span>•</span>
<span>From £5/month</span>
<span>•</span>
<span>Cancel any time</span>
</div>
<div class="mt-8 max-w-xl mx-auto bg-white rounded-lg shadow-md p-6">
<h3 class="text-xl font-bold text-gray-900 mb-4">What is your volume of sale?</h3>
<div class="flex justify-between items-center text-gray-600 mb-4">
<span>VOLUME</span>
<span>PRICE</span>
</div>
<div class="flex justify-between items-center text-gray-900 font-bold mb-2">
<span>£2000 per month</span>
<span>£15 per month</span>
</div>
<div class="mb-6">
<input type="range" min="0" max="10000" value="2000" class="w-full h-2 bg-blue-200 rounded-lg appearance-none cursor-pointer">
</div>
<div class="text-gray-600 mb-4">
<span class="font-bold text-gray-900">Estimated monthly cost £15*</span><br>
<span class="text-xs">* Plus card transaction fee's</span>
</div>
<a href="#" class="bg-green-500 text-white px-6 py-3 rounded-md w-full block text-center">SIGN UP</a>
</div>
</div>
</section>
<footer class="bg-blue-900 text-white py-12">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row md:justify-between items-center">
<div class="mb-6 md:mb-0">
<h1 class="text-3xl font-bold mb-2">PAY HERE</h1>
<p class="text-gray-300">PayHere takes care of your business so you can focus on taking care of your clients</p>
</div>
<div class="space-x-6">
<a href="#" class="text-gray-300 hover:text-white">Features</a>
<a href="#" class="text-gray-300 hover:text-white">Pricing</a>
<a href="#" class="text-gray-300 hover:text-white">Blog</a>
<a href="#" class="text-gray-300 hover:text-white">Merchant login</a>
<a href="#" class="text-gray-300 hover:text-white">Customer login</a>
</div>
</div>
<div class="mt-6 border-t border-gray-700 pt-6 flex flex-col md:flex-row md:justify-between text-sm text-gray-400">
<div class="space-x-4">
<a href="#" class="hover:text-white">Terms of Service</a>
<a href="#" class="hover:text-white">Privacy Policy</a>
<a href="#" class="hover:text-white">Security Policy</a>
</div>
<div class="mt-4 md:mt-0">&copy; PayHere Payments Ltd</div>
</div>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment