ทดสอบ

<!DOCTYPE html>

<head>

<title>Social Media Post Card</title>

tailwind.config = {

theme: {

extend: {

colors: {

'facebook-blue': '#1877F2',

'card-bg': '#FFFFFF',

'body-bg': '#F0F2F5',

'text-primary': '#050505',

'text-secondary': '#65676B',

'divider-light': '#E4E6EB',

'like-hover': '#F2F2F2',

fontFamily: {

'display': ['Outfit', 'sans-serif'],

'body': ['Inter', 'sans-serif'],

animation: {

'fade-in': 'fadeIn 0.5s ease-out forwards',

'pulse-sm': 'pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',

keyframes: {

fadeIn: {

'0%': { opacity: 0, transform: 'translateY(10px)' },

'100%': { opacity: 1, transform: 'translateY(0)' },

pulse: {

'0%, 100%': { opacity: 1 },

'50%': { opacity: .75 },

}

</script>

<style>

body {

font-family: 'Inter', sans-serif;

background-color: #F0F2F5; /* Matches body-bg from config */

display: flex;

justify-content: center;

align-items: flex-start; /* Align to top for iframe */

min-height: 100vh;

padding: 2rem 1rem;

box-sizing: border-box;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

/* Micro-animations for engagement footer */

.engagement-item {

transition: background-color 0.2s ease, transform 0.1s ease;

}

.engagement-item:hover {

background-color: #F2F2F2;

transform: translateY(-2px);

}

.engagement-item:active {

transform: translateY(0);

}

/* SVG icons for engagement footer - generic placeholders */

.icon {

width: 1.25rem;

height: 1.25rem;

fill: #65676B;

transition: fill 0.2s ease;

}

.engagement-item:hover .icon {

fill: #1877F2; /* Facebook blue on hover */

}

/* Highlight hashtags subtly */

.hashtags p {

line-height: 1.4; /* Adjust line-height for better hashtag readability */

}

.hashtags a {

color: inherit; /* Maintain parent color for seamless look */

text-decoration: none;

font-weight: 500;

}

.hashtags a:hover {

text-decoration: underline;

color: #1877F2; /* Blue underline on hover */

}

</style>

</head>

</svg>

</div>

<div>

<h2 class="font-display text-lg font-bold text-text-primary leading-tight">Creative Insights</h2>

</div>

</div>

<p class="mb-4 text-base leading-relaxed text-text-primary">Unbelievable views like this make you stop and just stare! 🤩 Imagine strolling down this picturesque street, framed by charming architecture and vibrant trees, only to look up and see *that* – colossal mountains piercing the sky. It's the perfect blend of urban charm and raw, breathtaking nature. What an epic backdrop for everyday life! Where do you dream of experiencing a view like this?</p>

<p class="mb-4 text-base font-medium text-text-primary">Is this the most dramatic city backdrop you've ever seen?!</p>

<a href="#" class="text-facebook-blue hover:underline">#TravelGoals</a>

<a href="#" class="text-facebook-blue hover:underline">#MountainViews</a>

<a href="#" class="text-facebook-blue hover:underline">#Cityscape</a>

<a href="#" class="text-facebook-blue hover:underline">#NatureLover</a>

<a href="#" class="text-facebook-blue hover:underline">#Wanderlust</a>

<a href="#" class="text-facebook-blue hover:underline">#BeautifulDestinations</a>

<a href="#" class="text-facebook-blue hover:underline">#UrbanExploration</a>

<a href="#" class="text-facebook-blue hover:underline">#StreetPhotography</a>

<a href="#" class="text-facebook-blue hover:underline">#EpicViews</a>

<a href="#" class="text-facebook-blue hover:underline">#TravelGram</a>

<a href="#" class="text-facebook-blue hover:underline">#ExploreTheWorld</a>

<a href="#" class="text-facebook-blue hover:underline">#PicturePerfect</a>

</div>

</button>

<span class="font-semibold text-text-secondary">Comment</span>

</button>

<span class="font-semibold text-text-secondary">Share</span>

</button>

</div>

</body>

</html>

Page updated

Google Sites

Report abuse