<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>李白朋友圈 - 唐代诗人社交网络</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#8B0000', // 深红色 - 代表唐代文化和诗意
secondary: '#D2B48C', // 棕褐色 - 代表历史感和纸张
accent: '#4A6FA5', // 靛蓝色 - 代表文化深度
neutral: '#F5F5DC', // 米白色 - 代表古代纸张
dark: '#2C3539', // 深色 - 用于文字和边框
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
serif: ['"Noto Serif SC"', 'serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.card-hover {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.bg-ancient-paper {
background-image: url('https://picsum.photos/id/106/1200/800');
background-size: cover;
background-position: center;
background-blend-mode: overlay;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
}
</style>
</head>
<body class="bg-neutral min-h-screen font-sans text-dark">
<!-- 顶部导航 -->
<header class="bg-primary text-white shadow-lg sticky top-0 z-50 transition-all duration-300" id="header">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fa fa-commenting-o text-2xl" aria-hidden="true"></i>
<h1 class="text-xl md:text-2xl font-bold">李白朋友圈</h1>
</div>
<div class="flex items-center space-x-4">
<button id="add-card-btn" class="bg-secondary hover:bg-secondary/80 text-dark px-4 py-2 rounded-lg flex items-center transition-all duration-300 transform hover:scale-105">
<i class="fa fa-plus-circle mr-2" aria-hidden="true"></i>添加史料卡
</button>
<button id="edit-mode-btn" class="bg-dark hover:bg-dark/80 text-white px-4 py-2 rounded-lg flex items-center transition-all duration-300">
<i class="fa fa-pencil mr-2" aria-hidden="true"></i><span id="edit-mode-text">编辑模式</span>
</button>
</div>
</div>
</header>
<!-- 主要内容区 -->
<main class="container mx-auto px-4 py-8">
<!-- 介绍卡片 -->
<div class="bg-secondary/30 rounded-xl p-6 mb-8 shadow-lg border border-primary/20">
<h2 class="text-2xl font-bold mb-4 text-primary flex items-center">
<i class="fa fa-info-circle mr-2" aria-hidden="true"></i>关于李白朋友圈
</h2>
<p class="text-lg mb-3">以现代社交媒体形式呈现唐代诗人李白及其朋友圈的互动，结合《将进酒》创作背景与历史人物关系，展现盛唐文化风貌。</p>
<p class="text-lg">每张史料卡包含人物昵称、动态、互动信息及史料备注，点击卡片可查看详情。支持添加新卡片和编辑已有内容。</p>
</div>
<!-- 卡片容器 -->
<div id="cards-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- 李白本尊 -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover border border-primary/30" data-id="1">
<div class="p-5">
<div class="flex justify-between items-start mb-4">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/id/237/100/100" alt="李白头像" class="w-12 h-12 rounded-full object-cover border-2 border-primary">
<div>
<h3 class="font-bold text-lg text-primary">青莲酒剑仙</h3>
<p class="text-sm text-gray-600">李白本尊</p>
</div>
</div>
<div class="edit-buttons hidden">
<button class="edit-btn text-gray-500 hover:text-primary transition-colors">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<button class="delete-btn text-gray-500 hover:text-red-500 transition-colors ml-2">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</div>
</div>
<p class="mb-4 text-dark/90">"岑夫子！丹丘生！将进酒，杯莫停！三百杯不够，今夜再战敬亭山！"</p>
<div class="flex items-center text-sm text-gray-500 mb-4">
<i class="fa fa-map-marker mr-1" aria-hidden="true"></i>
<span>嵩山颍阳山居·元丹丘家后院</span>
</div>
<div class="relative group mb-4">
<img src="https://picsum.photos/id/42/600/400" alt="配图" class="w-full h-48 object-cover rounded-lg cursor-pointer transition-transform duration-300 hover:scale-105">
<div class="absolute inset-0 bg-black/40 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-white text-shadow">查看原图</span>
</div>
</div>
<div class="flex justify-between items-center mb-3">
<div class="flex space-x-4">
<button class="like-btn flex items-center text-gray-500 hover:text-primary transition-colors">
<i class="fa fa-thumbs-o-up mr-1" aria-hidden="true"></i>
<span>28</span>
</button>
<button class="comment-btn flex items-center text-gray-500 hover:text-primary transition-colors">
<i class="fa fa-comment-o mr-1" aria-hidden="true"></i>
<span>3</span>
</button>
</div>
<span class="text-xs text-gray-400">昨天 23:45</span>
</div>
<div class="border-t border-gray-200 pt-3">
<div class="bg-gray-100 rounded-lg p-3 mb-2">
<div class="flex items-center mb-1">
<span class="font-bold text-accent mr-1">玉真公主</span>
<span class="text-xs text-gray-500">点赞并评论</span>
</div>
<p class="text-sm">酒虽好，莫贪杯。明日来观中煮茶论道？</p>
</div>
<div class="bg-gray-100 rounded-lg p-3 mb-2">
<div class="flex items-center mb-1">
<span class="font-bold text-accent mr-1">岑夫子</span>
<span class="text-xs text-gray-500">回复</span>
</div>
<p class="text-sm">你写诗倒是痛快，我家的马都被你押去换酒了！😤</p>
</div>
<div class="bg-gray-100 rounded-lg p-3">
<div class="flex items-center mb-1">
<span class="font-bold text-accent mr-1">丹丘生</span>
<span class="text-xs text-gray-500">转发</span>
</div>
<p class="text-sm">下次炼丹炉旁摆酒局，仙丹配烈酒，长生加倍！</p>
</div>
</div>
</div>
<div class="bg-secondary/20 p-4 border-t border-primary/20">
<div class="flex items-center text-primary mb-2">
<i class="fa fa-history mr-2" aria-hidden="true"></i>
<h4 class="font-bold">史料备注</h4>
</div>
<p class="text-sm text-dark/80">李白与岑勋、元丹丘因酒结缘，仕途失意后常聚饮抒怀，《将进酒》即诞生于三人狂饮之夜。诗中"天生我材必有用"既是自勉，亦暗含对玉真公主举荐的感激。</p>
</div>
</div>
<!-- 玉真公主 -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover border border-primary/30" data-id="2">
<div class="p-5">
<div class="flex justify-between items-start mb-4">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/id/64/100/100" alt="玉真公主头像" class="w-12 h-12 rounded-full object-cover border-2 border-primary">
<div>
<h3 class="font-bold text-lg text-primary">上真·道观在逃公主</h3>
<p class="text-sm text-gray-600">玉真公主</p>
</div>
</div>
<div class="edit-buttons hidden">
<button class="edit-btn text-gray-500 hover:text-primary transition-colors">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<button class="delete-btn text-gray-500 hover:text-red-500 transition-colors ml-2">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</div>
</div>
<p class="mb-4 text-dark/90">"青灯黄卷三十载，今日观中梨花落，忽忆故人诗一句：『若非群玉山头见，会向瑶台月下逢』。"</p>
<div class="flex items-center text-sm text-gray-500 mb-4">
<i class="fa fa-map-marker mr-1" aria-hidden="true"></i>
<span>敬亭山清虚观</span>
</div>
<div class="relative group mb-4">
<img src="https://picsum.photos/id/152/600/400" alt="配图" class="w-full h-48 object-cover rounded-lg cursor-pointer transition-transform duration-300 hover:scale-105">
<div class="absolute inset-0 bg-black/40 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-white text-shadow">查看原图</span>
</div>
</div>
<div class="flex justify-between items-center mb-3">
<div class="flex space-x-4">
<button class="like-btn flex items-center text-gray-500 hover:text-primary transition-colors">
<i class="fa fa-thumbs-o-up mr-1" aria-hidden="true"></i>
<span>42</span>
</button>
<button class="comment-btn flex items-center text-gray-500 hover:text-primary transition-colors">
<i class="fa fa-comment-o mr-1" aria-hidden="true"></i>
<span>2</span>
</button>
</div>
<span class="text-xs text-gray-400">前天 14:23</span>
</div>
<div class="border-t border-gray-200 pt-3">
<div class="bg-gray-100 rounded-lg p-3 mb-2">
<div class="flex items-center mb-1">
<span class="font-bold text-accent mr-1">李白</span>
<span class="text-xs text-gray-500">评论</span>
</div>
<p class="text-sm">公主仙姿，当入《清平调》续篇！</p>
</div>
<div class="bg-gray-100 rounded-lg p-3">
<div class="flex items-center mb-1">
<span class="font-bold text-accent mr-1">王维</span>
<span class="text-xs text-gray-500">点赞并私信</span>
</div>
<p class="text-sm">新谱一曲《郁轮袍》，盼公主雅赏。</p>
</div>
</div>
</div>
<div class="bg-secondary/20 p-4 border-t border-primary/20">
<div class="flex items-center text-primary mb-2">
<i class="fa fa-history mr-2" aria-hidden="true"></i>
<h4 class="font-bold">史料备注</h4>
</div>
<p class="text-sm text-dark/80">玉真公主为唐玄宗胞妹，修道后广交文人，曾向玄宗力荐李白。李白多次为其作诗，赞其"气韵如仙"，两人以道法为纽带保持精神知己关系，未涉俗世情爱。</p>
</div>
</div>
<!-- 岑夫子 -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover border border-primary/30" data-id="3">
<div class="p-5">
<div class="flex justify-between items-start mb-4">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/id/22/100/100" alt="岑夫子头像" class="w-12 h-12 rounded-full object-cover border-2 border-primary">
<div>
<h3 class="font-bold text-lg text-primary">大唐酒局赞助商</h3>
<p class="text-sm text-gray-600">岑夫子（岑勋）</p>
</div>
</div>
<div class="edit-buttons hidden">
<button class="edit-btn text-gray-500 hover:text-primary transition-colors">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<button class="delete-btn text-gray-500 hover:text-red-500 transition-colors ml-2">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</div>
</div>
<p class="mb-4 text-dark/90">"谁能想到？千年前某夜蹭了顿酒，竟被@青莲酒剑仙 写进诗里名垂青史……这波血赚！"</p>
<div class="flex items-center text-sm text-gray-500 mb-4">
<i class="fa fa-map-marker mr-1" aria-hidden="true"></i>
<span>鸣皋山隐居草堂</span>
</div>
<div class="relative group mb-4">
<img src="https://picsum.photos/id/106/600/400" alt="配图" class="w-full h-48 object-cover rounded-lg cursor-pointer transition-transform duration-300 hover:scale-105">
<div class="absolute inset-0 bg-black/40 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-white text-shadow">查看原图</span>
</div>
</div>
<div class="flex justify-between items-center mb-3">
<div class="flex space-x-4">
<button class="like-btn flex items-center text-gray-500 hover:text-primary transition-colors">
<i class="fa fa-thumbs-o-up mr-1" aria-hidden="true"></i>
<span>19</span>
</button>
<button class="comment-btn flex items-center text-gray-500 hover:text-primary transition-colors">
<i class="fa fa-comment-o mr-1" aria-hidden="true"></i>
<span>2</span>
</button>
</div>
<span class="text-xs text-gray-400">3天前</span>
</div>
<div class="border-t border-gray-200 pt-3">
<div class="bg-gray-100 rounded-lg p-3 mb-2">
<div class="flex items-center mb-1">
<span class="font-bold text-accent mr-1">丹丘生</span>
<span class="text-xs text-gray-500">评论</span>
</div>
<p class="text-sm">下次酒钱你出，我负责炼丹醒酒。</p>
</div>
<div class="bg-gray-100 rounded-lg p-3">
<div class="flex items-center mb-1">
<span class="font-bold text-accent mr-1">元稹</span>
<span class="text-xs text-gray-500">路过吃瓜</span>
</div>
<p class="text-sm">实名羡慕！求带飞文学史！</p>
</div>
</div>
</div>
<div class="bg-secondary/20 p-4 border-t border-primary/20">
<div class="flex items-center text-primary mb-2">
<i class="fa fa-history mr-2" aria-hidden="true"></i>
<h4 class="font-bold">史料备注</h4>
</div>
<p class="text-sm text-dark/80">岑勋出身名门（或附会岑参家族），与李白、元丹丘组成"贪杯三人组"。《将进酒》中"岑夫子，丹丘生"一句使其意外成为文化符号，生平虽鲜见史载，却因诗不朽。</p>
</div>
</div>
<!-- 丹丘生 -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover border border-primary/30" data-id="4">
<div class="p-5">
<div class="flex justify-between items-start mb-4">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/id/28/100/100" alt="丹丘生头像" class="w-12 h-12 rounded-full object-cover border-2 border-primary">
<div>
<h3 class="font-bold text-lg text-primary">炼丹·交友·催酒三栖达人</h3>
<p class="text-sm text-gray-600">丹丘生（元丹丘）</p>
</div>
</div>
<div class="edit-buttons hidden">
<button class="edit-btn text-gray-500 hover:text-primary transition-colors">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<button class="delete-btn text-gray-500 hover:text-red-500 transition-colors ml-2">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</div>
</div>
<p class="mb-4 text-dark/90">"新丹方：朱砂三钱，晨露半盏，佐以@青莲酒剑仙 诗稿灰烬，服之可增诗胆！"</p>
<div class="flex items-center text-sm text-gray-500 mb-4">
<i class="fa fa-map-marker mr-1" aria-hidden="true"></i>
<span>嵩山炼丹洞</span>
</div>
<div class="relative group mb-4">
<img src="https://picsum.photos/id/118/600/400" alt="配图" class="w-full h-48 object-cover rounded-lg cursor-pointer transition-transform duration-300 hover:scale-105">
<div class="absolute inset-0 bg-black/40 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-white text-shadow">查看原图</span>
</div>
</div>
<div class="flex justify-between items-center mb-3">
<div class="flex space-x-4">
<button class="like-btn flex items-center text-gray-500 hover:text-primary transition-colors">
<i class="fa fa-thumbs-o-up mr-1" aria-hidden="true"></i>
<span>33</span>
</button>
<button class="comment-btn flex items-center text-gray-500 hover:text-primary transition-colors">
<i class="fa fa-comment-o mr-1" aria-hidden="true"></i>
<span>2</span>
</button>
</div>
<span class="text-xs text-gray-400">4天前</span>
</div>
<div class="border-t border-gray-200 pt-3">
<div class="bg-gray-100 rounded-lg p-3 mb-2">
<div class="flex items-center mb-1">
<span class="font-bold text-accent mr-1">李白</span>
<span class="text-xs text-gray-500">评论</span>
</div>
<p class="text-sm">丹成之日，速唤我来试药——以酒送服！</p>
</div>
<div class="bg-gray-100 rounded-lg p-3">
<div class="flex items-center mb-1">
<span class="font-bold text-accent mr-1">司马承祯</span>
<span class="text-xs text-gray-500">道圈大V转发</span>
</div>
<p class="text-sm">道友跨界创新，道法诗酒两开花🌼</p>
</div>
</div>
</div>
<div class="bg-secondary/20 p-4 border-t border-primary/20">
<div class="flex items-center text-primary mb-2">
<i class="fa fa-history mr-2" aria-hidden="true"></i>
<h4 class="font-bold">史料备注</h4>
</div>
<p class="text-sm text-dark/80">元丹丘为李白挚友兼修道导师，二人相识二十余年，李白为其作诗11首远超杜甫。他组局促成《将进酒》，堪称李白"酒灵感"背后的男人。</p>
</div>
</div>
<!-- 王维 -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover border border-primary/30" data-id="5">
<div class="p-5">
<div class="flex justify-between items-start mb-4">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/id/91/100/100" alt="王维头像" class="w-12 h-12 rounded-full object-cover border-2 border-primary">
<div>
<h3 class="font-bold text-lg text-primary">诗佛·佛系点赞党</h3>
<p class="text-sm text-gray-600">王维</p>
</div>
</div>
<div class="edit-buttons hidden">
<button class="edit-btn text-gray-500 hover:text-primary transition-colors">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<button class="delete-btn text-gray-500 hover:text-red-500 transition-colors ml-2">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</div>
</div>
<p class="mb-4 text-dark/90">"新作《辋川集》付梓，诸君可至蓝田别业品茗共赏——@上真·道观在逃公主 特留雅座。"</p>
<div class="flex items-center text-sm text-gray-500 mb-4">
<i class="fa fa-map-marker mr-1" aria-hidden="true"></i>
<span>辋川别墅</span>
</div>
<div class="relative group mb-4">
<img src="https://picsum.photos/id/175/600/400" alt="配图" class="w-full h-48 object-cover rounded-lg cursor-pointer transition-transform duration-300 hover:scale-105">
<div class="absolute inset-0 bg-black/40 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-white text-shadow">查看原图</span>
</div>
</div>
<div class="flex justify-between items-center mb-3">
<div class="flex space-x-4">
<button class="like-btn flex items-center text-gray-500 hover:text-primary transition-colors">
<i class="fa fa-thumbs-o-up mr-1" aria-hidden="true"></i>
<span>56</span>
</button>
<button class="comment-btn flex items-center text-gray-500 hover:text-primary transition-colors">
<i class="fa fa-comment-o mr-1" aria-hidden="true"></i>
<span>2</span>
</button>
</div>
<span class="text-xs text-gray-400">5天前</span>
</div>
<div class="border-t border-gray-200 pt-3">
<div class="bg-gray-100 rounded-lg p-3 mb-2">
<div class="flex items-center mb-1">
<span class="font-bold text-accent mr-1">玉真公主</span>
<span class="text-xs text-gray-500">回复</span>
</div>
<p class="text-sm">雪日煎茶，静候君至。</p>
</div>
<div class="bg-gray-100 rounded-lg p-3">
<div class="flex items-center mb-1">
<span class="font-bold text-accent mr-1">裴迪</span>
<span class="text-xs text-gray-500">点赞</span>
</div>
<p class="text-sm">摩诘兄雅致，弟已备好松柴煮泉！</p>
</div>
</div>
</div>
<div class="bg-secondary/20 p-4 border-t border-primary/20">
<div class="flex items-center text-primary mb-2">
<i class="fa fa-history mr-2" aria-hidden="true"></i>
<h4 class="font-bold">史料备注</h4>
</div>
<p class="text-sm text-dark/80">王维早年受玉真公主提携中举，后因娶妻与其疏远。虽与李白同代且共友，史料未见二人直接交集，疑似因公主"朋友圈"微妙避嫌。</p>
</div>
</div>
</div>
</main>
<!-- 添加/编辑卡片的模态框 -->
<div id="card-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden">
<div class="bg-white rounded-xl w-full max-w-3xl max-h-[90vh] overflow-y-auto">
<div class="p-6 border-b border-gray-200">
<div class="flex justify-between items-center">
<h3 class="text-xl font-bold text-primary" id="modal-title">添加新史料卡</h3>
<button id="close-modal" class="text-gray-500 hover:text-gray-700">
<i class="fa fa-times text-xl" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="p-6">
<form id="card-form">
<input type="hidden" id="card-id">
<div class="mb-4">
<label for="card-nickname" class="block text-sm font-medium text-gray-700 mb-1">昵称</label>
<input type="text" id="card-nickname" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="例如：青莲酒剑仙">
</div>
<div class="mb-4">
<label for="card-realname" class="block text-sm font-medium text-gray-700 mb-1">真实姓名</label>
<input type="text" id="card-realname" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="例如：李白本尊">
</div>
<div class="mb-4">
<label for="card-avatar" class="block text-sm font-medium text-gray-700 mb-1">头像URL</label>
<input type="text" id="card-avatar" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="例如：https://picsum.photos/id/237/100/100">
</div>
<div class="mb-4">
<label for="card-content" class="block text-sm font-medium text-gray-700 mb-1">动态内容</label>
<textarea id="card-content" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="例如：'岑夫子！丹丘生！将进酒，杯莫停！三百杯不够，今夜再战敬亭山！'"></textarea>
</div>
<div class="mb-4">
<label for="card-location" class="block text-sm font-medium text-gray-700 mb-1">定位</label>
<input type="text" id="card-location" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="例如：嵩山颍阳山居·元丹丘家后院">
</div>
<div class="mb-4">
<label for="card-image" class="block text-sm font-medium text-gray-700 mb-1">配图URL</label>
<input type="text" id="card-image" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="例如：https://picsum.photos/id/42/600/400">
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">互动评论</label>
<div id="interactions-container">
<div class="interaction-item mb-3 p-3 border border-gray-200 rounded-lg">
<div class="flex items-center mb-2">
<input type="text" class="w-1/3 mr-2 px-3 py-1 border border-gray-300 rounded" placeholder="评论人">
<select class="w-1/4 mr-2 px-3 py-1 border border-gray-300 rounded">
<option value="comment">评论</option>
<option value="reply">回复</option>
<option value="like">点赞</option>
<option value="like-comment">点赞并评论</option>
<option value="forward">转发</option>
</select>
<button class="remove-interaction text-red-500 hover:text-red-700">
<i class="fa fa-minus-circle" aria-hidden="true"></i>
</button>
</div>
<textarea class="w-full px-3 py-2 border border-gray-300 rounded" placeholder="评论内容"></textarea>
</div>
</div>
index.html