1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import { Hono } from "npm:hono";
5import { parseProject } from "https://esm.town/v/std/utils@85-main/index.ts";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { renderToString } from "npm:react-dom@18.2.0/server";
3
4<!DOCTYPE html>
1Prompt for a React App with Tailwind CSS
2I need a simple task management application (a "To-Do List" app) built using React for the front-end and styled entirely with Tailwind CSS.
3
4The app should be clean, intuitive, and fully responsive across different screen sizes.
30Technical Considerations:
31
32React Components: Structure the application into logical, reusable React functional components (e.g., App, TaskInput, TaskList, TaskItem, FilterButtons).
33State Management: Use React's useState hook for managing the list of tasks and their completion status.
34Styling: Strictly use Tailwind CSS classes for all styling. Do not use inline styles or separate CSS files.
35No external libraries for UI components (e.g., no Material UI, Ant Design, etc., unless specifically for icons).
36Icons: Use lucide-react for simple icons (e.g., delete icon, check icon).
37The goal is a functional, visually appealing, and well-structured React application demonstrating effective use of Tailwind CSS.
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export const reactExample = () =>
5 new Response(renderToString(<div>Test {1 + 1}</div>), {
6 headers: {
1/** @jsxImportSource https://esm.sh/preact */
2import { render } from "npm:preact-render-to-string";
3
4export const preactExample = () =>
5 new Response(render(<div>Test {1 + 1}</div>), {
6 headers: {
1/** @jsxImportSource https://esm.sh/react@19 */
2import fcsdk from "https://esm.sh/@farcaster/frame-sdk";
3import { useQuery } from "https://esm.sh/@tanstack/react-query@5";
4import { NavLink, Route, Routes } from "https://esm.sh/react-router@7";
5import { useEffect, useState } from "https://esm.sh/react@19";
6
7import { Example } from "./components/Example.tsx";
51 {/* <h2 className="">Features:</h2> */}
52 <div className="opacity-50">
53 <div className="">✷ Hono + React + Tailwind</div>
54 <div className="">✷ React Router + React Query</div>
55 <div className="">✷ Built-in database (blob storage)</div>
56 <div className="">✷ Farcaster mini app manifest + webhook + embed metadata</div>
3 "target": "ES2022",
4 "module": "ESNext",
5 "jsx": "react-jsx",
6 "strict": true,
7 "noImplicitAny": true,
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import {
3 AnimatePresence,
4 motion,
5} from "https://esm.sh/framer-motion?deps=react@18.2.0,react-dom@18.2.0";
6import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
7import React, {
8 useCallback,
9 useEffect,
10 useRef,
11 useState,
12} from "https://esm.sh/react@18.2.0";
13
14function ErrorMessage({ message, retry, useFallback }) {
602}
603
604class ErrorBoundary extends React.Component {
605 constructor(props) {
606 super(props);
