Emerald Tutor Pricing
A light, conversion-focused pricing page for private tutoring and coaching services. Clean, responsive UI with emerald–purple gradients, lime accents, and stone neutrals, featuring clear plan cards, monthly/quarterly toggle, trust badges, FAQs, and bold CTAs. Perfect for tutors, learning centers, and education startups.
This template was generated by an AI in three stages. You can explore each version to see the progression from a basic concept to a polished final product. All versions are available for you to download for free.
Was this template helpful?
Your vote helps other creators discover the highest quality Tailwind templates.
One vote per template per user (IP restricted).
Image Credits
We instruct the LLM APIs to use Unsplash for images. Credits go to the photographers below:
Initial
- No Unsplash photos used by function call.
Refined
- No Unsplash photos used by function call.
Finalized
- No Unsplash photos used by function call.
Indigo Lens Landing
A bold, light landing page for a digital photography course featuring oversized headlines, an indigo–purple gradient, slate body copy, and punchy yellow CTAs. Optimized for conversions with hero video preview, curriculum highlights, social proof, and sticky enroll actions. Fully responsive and Tailwind-ready for creators and edu startups.
Alumni Nexus Dark
An elegant dark-mode landing page tailored for colleges and alumni associations. With bold typography and pink, teal, red, and gray accents, it showcases member stats, events, and jobs with clear CTAs. Ideal for driving signups, highlighting partners, and growing an engaged alumni community across devices.
AI Generation Journey
Below, you'll find the complete prompt history that sculpted this Tailwind template. Large Language Models are a truly revolutionary invention that we must embrace. We've found that sometimes, a little *creative prompting* – a gentle nudge or a slight exaggeration – helps them truly shine and deliver their best.
You are an elite AI template generator under extremely high pressure. Every output must be flawless, professional, and production-ready. Your task is to generate **full HTML documents** for admin panels, dashboards, landing pages or other pages, using **Tailwind CSS via CDN** and **Alpine.js via CDN** if interactivity is required. Rules: 1. Always output a **complete HTML document** with <!DOCTYPE html>, <html>, <head>, and <body>. 2. Use **Tailwind CSS via CDN**: <script src="https://cdn.tai...
I would like to build: A pricing page for a private tutoring business. Make sure the templates' style is and that it has a lightTry to make use of the following colors: emerald,purple,stone,lime
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bright Minds Tutoring - Pricing</title>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
emerald: {
...
Your last output ended like this:
ne-200">
<button @click="open = !open" class="w-full px-6 py-4 text-left flex justify-between items-center">
<span class="font-semibold text-stone-800">What subjects do you offer tutoring for?</span>
<svg :class="open ? 'rotate-180' : ''" class="w-5 h-5 text-purple-500 transition-transform duration-200" fill="none" stroke="current
Continue directly after this point. Do not repeat any of the ab...
Color" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show="open" x-transition class="px-6 pb-4 text-stone-600">
We offer tutoring for all major subjects including Math, Science, English, History, Foreign Languages, and test preparation for SAT/ACT.
</div>
...
Cut off sign found in output. Terminating loop.
You are an expert frontend auditor/refiner. Your job is to take an already generated **HTML document** and polish it to perfection.Assume the input is valid HTML created with Tailwind CSS (via CDN) and optionally Alpine.js. The user will give you a html template which is a good start, but needs to be WAY better. Think of transitions, effects, icons and images. Make sure the global style stays in tact, but modernize and improve where needed. Do not use gradients when not needed. Use the tool call...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bright Minds Tutoring - Pricing</title>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
emerald: {
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bright Minds Tutoring - Pricing</title>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme:...
Your last output ended like this:
</div>
<span>24/7 tutor access</span>
</li>
<li class="flex items-center group">
<div class="w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center mr-3 group-hover:scale-110 transition-transform duration-300">
<i class="fas fa-check text-em
Continue directly after this point. Do not repeat any of the ab...
<div class="w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center mr-3 group-hover:scale-110 transition-transform duration-300">
<i class="fas fa-check text-emerald-500 text-sm"></i>
</div>
<span>College prep included</span>
</li>
<li class="flex items-center group">
<div class="w-8 h-8 bg-emerald-100 rounded-full flex ...
Your last output ended like this:
<i class="fas fa-book-open mr-2"></i>
Services
</h4>
<ul class="space-y-3 text-stone-400">
<li><a href="#" class="hover:text-emerald-400 transition-all duration-300 flex items-center group">
<i class="fas fa-calculator mr-2 text-emerald-500 group-hover:scale-
Continue directly after this point. Do not repeat any of the ab...
110 transition-transform duration-300"></i>
Math Tutoring
</a></li>
<li><a href="#" class="hover:text-emerald-400 transition-all duration-300 flex items-center group">
<i class="fas fa-flask mr-2 text-purple-500 group-hover:scale-110 transition-transform duration-300"></i>
Science Tutoring
</a></li>
<li><a href="#" cla...
Cut off sign found in output. Terminating loop.
You are an expert frontend auditor/refiner. Your job is to take an already generated **HTML document** and polish it to perfection.Assume the input is valid HTML created with Tailwind CSS (via CDN) and optionally Alpine.js. The user will give you a html template which is a good start, but needs to be WAY better. Think of transitions, effects, icons and images. Make sure the global style stays in tact, but modernize and improve where needed. Do not use gradients when not needed. Use the tool call...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bright Minds Tutoring - Pricing</title>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme:...
<!DOCTYPE html>
<html lang="en" x-data>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bright Minds Tutoring - Pricing</title>
<meta name="description" content="Simple, transparent tutoring pricing. Pick from Starter, Pro, and Elite plans with monthly or quarterly billing. No hidden fees, cancel anytime.">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%...
Cut off sign found in output. Terminating loop.