React Components
Last React components generated by our users
start generating a blue CTA component Franz Atergo
about 2 hours ago
FAcreate a landing page for truck transportation bussiness Ayush Gaikwad
about 2 hours ago
AGCreate a ball element with a dynamic number in the middle, make it look like a lottery ball Don Andre Apilado
about 9 hours ago
DAAcrie uma tela de app mobile para uma pagina com uma lista de imoveis, para o administrador gerenciar Mídia Bros
about 11 hours ago
MBcreate a app screen with property list Mídia Bros
about 11 hours ago
MBСделай mega menu на pagedone Vlad Chirka
about 11 hours ago
VCObjective: Create a modern trading platform website targeting forex traders, featuring tools/resources and user authentication.
Pages Required:
Homepage
Login/Signup Pages
Trading Tools Section
1. Homepage Requirements
Hero Section:
Bold text: "Fsociety FX - Revolutionize Your Trading"
Subtext: "Advanced tools for forex professionals & enthusiasts"
CTA Button: "Start Free Trial"
Key Features Grid:
3-4 boxes highlighting:
Real-Time Market Data
Risk Management Calculators
AI-Powered Predictions
Community Strategies
About Section:
Short paragraph: "Fsociety FX empowers traders with cutting-edge technology and institutional-grade analytics."
Footer:
Links: Privacy Policy, Terms, Social Media Icons
2. Login/Signup Pages
Signup Page:
Form fields: Email, Password, Confirm Password
Optional: "Referral Code" field
Disclaimer: "By signing up, you agree to our terms"
Login Page:
Form fields: Email, Password
Links: "Forgot Password?", "Create Account"
Design:
Clean modern layout with dark theme (#0A0A0A background)
Neon accent colors (e.g., #00FF88 for buttons)
3. Trading Tools Menu
Navigation Bar:
Logo: "Fsociety FX" (top-left)
Menu Items: Home | Tools | Pricing | Blog | Support
Tools Dashboard:
Category filters: Technical Analysis | Risk Management | Automation
Tool Cards (example items):
Pip Calculator
Economic Calendar
Margin Simulator
Pattern Recognition Scanner Un modal para abonar dinero, con 3 secciones, tarjeta, tienda y spei Gerardo Gallegos
about 13 hours ago
GGi want home page for the brand fsociety and the website if for tools for trading simulation and graphy performance and calculatrice i need desine for pc and phone also have good ui ux also i can be dark and ligh can you Tawfiq Khajrou
about 14 hours ago
TKPlease, generate a simple, but pretty html5/css landing page (without any js framework) for it/ai company Anton Dvornikov
about 15 hours ago
ADGenerate a modern hero for a car detailing shop i want a newsletter template CRUD operations, made for admins of a telecommunication company named "Orange" to post news related to their company, the website has to be well designed with orange buttons that match the Orange company design, and each news should have a title and description and a share functionality that enables the admin to send that news to another admin, aswell as a navigation bar that can search for each news, and of course don't forget the important CRUD operations:
Create newsletter form
Update existing newsletters
Delete functionality
List view
Yassine Maraoui
about 17 hours ago
YMМожешь создать классное мега меню на всю ширину страницы Vlad Chirka
about 19 hours ago
VCimprove this design
import type React from "react"
import { Card, CardContent } from "@/components/ui/card"
interface ChatEvent {
kind: string
msg: string
data: {
session_id: string
body: string
type: string
}
}
interface ChatEventCardProps {
title: string
icon: string
events: ChatEvent[]
}
const ChatEventCard: React.FC<ChatEventCardProps> = ({ title, icon, events }) => {
return (
<Card>
<CardContent>
<h2 className="font-semibold text-lg mb-2">
{icon} {title}
</h2>
{events.length === 0 ? (
<p className="text-gray-500">No chat messages</p>
) : (
<ul className="space-y-2">
{events.map((event, index) => (
<li key={index} className="border-b py-2">
<strong>Session ID: {event.data.session_id}</strong>
<p>{event.data.body}</p>
</li>
))}
</ul>
)}
</CardContent>
</Card>
)
}
export default ChatEventCard
Hrithik Tiwari
about 22 hours ago
HTI want a diagram where I can add nodes and dependancies Edouard Nattée
about 23 hours ago
ENgenerate a taiwind css her sectin, where we will have main items in a slide/carousel and good ui design Jala Joli
about 24 hours ago
JJAntonio Lanzolla
1 day ago
ALA modern single page, music library and playback app. Spotify like. Has a vertical nav bar on the left as well as a horizontal nav bar at the top, in the horizontal navbar should be a search bar with a spy glass, and a home button. In the vertical navbar should be an area for albums, playlists and liked songs, in the free space underneath the horizontal nav bar and to the right of the vertical nav bar should be a grid layout of albums and playlists as well as recently played songs. At the bottom of the page should be a music player bar which shows the album art, the song name and the album which it's in, in the center should be a playbar with skip buttons, a pause/play button, a shuffle button and a loop button. Podrias hacerme una pagina de perfil, en la cual, se va a guardar la imagen del usuario, que sera una que el usuario quiera subir de su galeria, y guardarlo en localstorage, pero juntandolo con authentication de firebase, todavia no me hagas nada, escribeme para ver si entendiste An ecommerce dashboard with a sidebar navigation and a table of recent orders. Create a responsive and visually appealing card component using HTML, CSS, and JavaScript. Each card should display the following data from the Operador interface:
ID: Display the id in a small, subtle font size.
Image: If an image is provided, display it as a circular profile picture. If not, show a placeholder avatar.
Name: Display the nombres and apellidos prominently as the card's title.
Contact Information: Display the telefono and email in a clean, readable format.
Personal Details: Show the nss, curp, ine, tipoSangre, and numLicencia in a collapsible section (e.g., an accordion) to save space.
Address: Display the colonia, calle, externo, and cp in a formatted address block.
License Information: Show the tipoLicencia and emisor in a dedicated section.
Area: If areaId or area is provided, display the associated work area name or ID.
Timestamps: Show the createAt and updateAt dates in a small footer section, formatted as 'Created: [date]' and 'Last Updated: [date]'.
Design Requirements:
Use a clean, modern design with rounded corners, subtle shadows, and a professional color scheme (e.g., light backgrounds with dark text).
Ensure the card is responsive and looks great on both desktop and mobile devices.
Use icons for key details (e.g., a phone icon for telefono, an envelope for email, a location pin for the address, etc.).
Interactive Elements:
Include two buttons at the bottom of each card:
Edit Button: Use an icon (e.g., a pencil) and label it 'Edit'. When clicked, it should trigger an edit action (use a placeholder function for now).
Delete Button: Use an icon (e.g., a trash can) and label it 'Delete'. When clicked, it should trigger a delete action (use a placeholder function for now).
Additional Notes:
Ensure the buttons are visually distinct (e.g., different colors) and have hover effects.
Use a grid layout to display multiple cards in a row, with appropriate spacing between them.
Add a subtle hover effect to the card to make it interactive (e.g., a slight scale-up or shadow change). site for Vehicle History Reports, with in top Search by vin or LICENSE PLATE, use svg images for each rubric site like https://goodcar.com, keep all svg images and rubric Generate a full landing page with subscription options for a site focused on selling SAML2 SSO Saas product