HTML 代码
<div class="min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 p-8 flex items-center justify-center">
<div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-8 space-y-8 border border-gray-200 dark:border-gray-700">
<h2 class="text-5xl font-extrabold text-center text-gray-800 dark:text-gray-100 leading-tight">
<span class="block">Congratulations!</span>
<span class="block text-purple-500 dark:text-purple-400 mt-2">Your Post is Live!</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Left Section: Post Preview -->
<div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-100 dark:border-gray-600">
<h3 class="text-2xl font-bold text-gray-700 dark:text-gray-200 mb-4">Your Latest Creation</h3>
<div class="relative rounded-lg overflow-hidden mb-4 aspect-video shadow-lg ring-4 ring-purple-300 dark:ring-purple-600">
<img src="https://picsum.photos/800/450?random=1" alt="Post Image" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent p-4 flex items-end">
<p class="text-white text-lg font-semibold">"Exploring new horizons and pushing boundaries."</p>
</div>
</div>
<div class="flex items-center space-x-3 mb-3">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-pink-300 dark:border-pink-500">
<p class="text-gray-600 dark:text-gray-300 font-medium">@CreativeExplorer</p>
</div>
<div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
<span><i class="fas fa-heart text-red-400"></i> 1.2K Likes</span>
<span><i class="fas fa-comment text-blue-400"></i> 89 Comments</span>
<span><i class="fas fa-share-alt text-green-400"></i> 20 Shares</span>
</div>
</div>
<!-- Right Section: Next Steps & Sharing -->
<div class="space-y-6">
<!-- Metrics Card -->
<div class="bg-purple-50 dark:bg-purple-900 border border-purple-200 dark:border-purple-700 rounded-lg p-6 shadow-md">
<h3 class="text-2xl font-bold text-purple-700 dark:text-purple-200 mb-4">Performance Snapshot</h3>
<div class="grid grid-cols-2 gap-4 text-center">
<div>
<p class="text-4xl font-extrabold text-purple-600 dark:text-purple-300">+15%</p>
<p class="text-gray-600 dark:text-gray-300 mt-1">Engagement Rate</p>
</div>
<div>
<p class="text-4xl font-extrabold text-pink-600 dark:text-pink-300">+300</p>
<p class="text-gray-600 dark:text-gray-300 mt-1">New Followers</p>
</div>
</div>
</div>
<!-- Call to Actions -->
<div class="bg-pink-50 dark:bg-pink-900 border border-pink-200 dark:border-pink-700 rounded-lg p-6 shadow-md space-y-4">
<h3 class="text-2xl font-bold text-pink-700 dark:text-pink-200 mb-4">What's Next?</h3>
<button class="w-full bg-gradient-to-r from-purple-400 to-pink-400 text-white font-bold py-3 px-6 rounded-full text-lg shadow-lg hover:from-purple-500 hover:to-pink-500 transform hover:scale-105 transition duration-300 ease-in-out">
<i class="fas fa-share-alt mr-2"></i> Share This Post
</button>
<button class="w-full bg-white dark:bg-gray-700 text-purple-600 dark:text-purple-300 font-bold py-3 px-6 rounded-full text-lg shadow-lg border border-purple-300 dark:border-purple-600 hover:bg-purple-50 dark:hover:bg-gray-600 transform hover:scale-105 transition duration-300 ease-in-out">
<i class="fas fa-chart-line mr-2"></i> View Analytics
</button>
<button class="w-full text-gray-600 dark:text-gray-300 bg-transparent border border-gray-300 dark:border-gray-600 font-bold py-3 px-6 rounded-full text-lg hover:bg-gray-100 dark:hover:bg-gray-700 transform hover:scale-105 transition duration-300 ease-in-out">
<i class="fas fa-plus mr-2"></i> Create Another Post
</button>
</div>
</div>
</div>
<!-- Footer Message -->
<p class="text-center text-gray-500 dark:text-gray-400 text-md mt-8">