Deepseek ArtifactsDeepseek Artifacts
Back to blocks

现代CSS美化代码

3.0
Estado: audit
zh前端技术CSS前端开发代码美化

Prompt

plase make very beauty and modern css the following code without use @import or tailwind:
        
   <strong>{description}</strong>
            <div>
              Nombre: {Name_person}<br />
			  Teléfono: {telefono}<br />
			  E-mail: {email}<br />
			  WhatsApp: {whatsapp}<br />
            </div>
            <input name="description" type="hidden" value={description} />
            <input name="email" type="hidden" value={email} />
            <input name="telefono" type="hidden" value={telefono} />
			<input name="telefono" type="hidden" value={whatsapp} />
            <input name="Name_person" type="hidden" value={Name_person} />
            <input name="id" type="hidden" value={id} />
            <br />

Resultado Generado

export default function App() {
  return (
    <pre style={{ whiteSpace: 'pre-wrap', padding: 24, fontFamily: 'monospace' }}>"<div className='App'>\n  <strong className='description'>{description}</strong>\n  <div className='contact-info'>\n    <p><span className='label'>Nombre:</span> {Name_person}</p>\n    <p><span className='label'>Teléfono:</span> {telefono}</p>\n    <p><span className='label'>E-mail:</span> {email}</p>\n    <p><span className='label'>WhatsApp:</span> {whatsapp}</p>\n  </div>\n  <input name='description' type='hidden' value={description} />\n  <input name='email' type='hidden' value={email} />\n  <input name='telefono' type='hidden' value={telefono} />\n  <input name='whatsapp' type='hidden' value={whatsapp} />\n  <input name='Name_person' type='hidden' value={Name_person} />\n  <input name='id' type='hidden' value={id} />\n</div>"</pre>
  );
}
Open on CodeSandboxOpen Sandbox

Más Recomendaciones

Ver Todo

React 数据获取教程

前端技术zh
4.0

import React, { useState, useEffect } from 'react'; const App = () => { const [data, setData] = useState(null); useEffect(() => { fetchData(); }, []); const fetchData = async () => { try { const response = await fetch('https://www.technosysa.com/new_announce.php?mode=get_announce&id=17'); const jsonData = await response.json(); setData(jsonData); } catch (error) { console.error('Error fetching data:', error); } }; return ( <div className="App"> <header className="bg-blue-600 p-4"> <h1 className="text-white text-2xl font-bold">Announcement</h1> </header> <main className="p-4"> {data ? ( <div className="bg-white shadow-lg rounded-lg p-6"> <h2 className="text-xl font-semibold mb-4">{data.title}</h2> <p className="text-gray-700">{data.content}</p> </div> ) : ( <p className="text-gray-700">Loading...</p> )} </main> <footer className="bg-gray-800 p-4 mt-8"> <p className="text-white text-center">© 2025 TechnoSys. All rights reserved.</p> </footer> </div> ); }; export default App;

React数据获取前端开发15/6/2025

CSS 按钮样式优化

前端技术en
4.0

generating this style flex items-center bg-green-500 text-white px-6 py-3 rounded-full shadow-lg hover:bg-green-600 transition duration-300 ease-in-out transform hover:-translate-y-1

CSS按钮样式前端开发14/6/2025

文本样式优化

前端技术en
4.0

block text-sm font-medium text-gray-700 mb-1

CSS样式设计前端开发12/6/2025

表单验证技巧

前端技术en
4.0

obtain className="product-info"> and className="payer-data-form", no use tailwind with validation fields

表单验证前端开发HTML12/6/2025

文章对话框CSS样式

前端技术zh
4.0

/* 文章页面对话框样式 */ .article-chat-container { background: var(--secondary-color); padding: 1.5rem; border-radius: var(--border-radius); box-shadow: var(--box-shadow); margin-top: 1.5rem; } .article-chat-history { height: var(--chat-history-height); overflow-y: auto; padding: 1rem; background-color: white; border-radius: var(--border-radius); margin-bottom: 1rem; } .article-message { margin-bottom: 1rem; display: flex; max-width: 85%; } .article-message.user { align-self: flex-end; justify-content: flex-end; margin-left: auto; } .article-message.ai { align-self: flex-start; } .article-message-content { padding: 1rem 1.2rem; border-radius: var(--message-border-radius); box-shadow: var(--message-shadow); } .user .article-message-content { background-color: var(--primary-color); color: white; border-bottom-right-radius: 4px; } .ai .article-message-content { background-color: var(--ai-message-bg); color: var(--text-color); border-bottom-left-radius: 4px; } .article-chat-input { display: flex; gap: 10px; } .article-chat-input textarea { flex: 1; border: 1px solid var(--border-color); border-radius: 20px; padding: 12px 15px; resize: none; font-family: inherit; font-size: 1rem; } .article-chat-input button { background-color: var(--primary-color); color: white; border: none; border-radius: 20px; padding: 0 1.5rem; cursor: pointer; font-weight: 500; transition: background-color 0.2s; } .article-chat-input button:hover { background-color: #0069d9; } .article-chat-input button:disabled { background-color: #cccccc; cursor: not-allowed; }

CSS前端开发UI设计27/3/2025