Answers to: Convert the image to React Component generate code in React+tailwindss

WRKAIAnswers

WRKAI

AI Tools

Files

Pricing

Design to Code

Convert the image to React Component generate code in React+tailwindss

Asked on 12/24/2025, 4 pageviews

Converted Designs

import React from 'react';

export default function Dashboard() {
  const data = [
    { day: 'Mon', value: 156 },
    { day: 'Tue', value: 187 },
    { day: 'Wed', value: 221 },
    { day: 'Thu', value: 204 },
    { day: 'Fri', value: 248 },
    { day: 'Sat', value: 139 },
    { day: 'Sun', value: 108 },
  ];

const peak = data.reduce((max, d) => (d.value > max.value ? d : max), data[0]);

return (
    <div className="min-h-screen bg-[#e9effa] antialiased">
      <div className="max-w-7xl mx-auto px-4 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Left: System Performance */}
          <section className="lg:col-span-2 bg-white rounded-2xl p-6 shadow-sm">
            <div className="flex items-center justify-between">
              <h3 className="text-lg font-semibold text-gray-800">System Performance</h3>
              <div className="relative">
                <select className="appearance-none bg-white border border-gray-200 rounded-md py-2 pl-3 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                  <option>Last 7 Days</option>
                  <option>Last 30 Days</option>
                </select>
                <span className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-gray-500">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <path d="M6 9l6 6 6-6" />
                  </svg>
                </span>
              </div>
            </div>

<div className="mt-6">
              <div className="flex items-end justify-between gap-6">
                {data.map((d, idx) => (
                  <div key={idx} className="flex flex-col items-center">
                    <span className="text-sm font-semibold text-gray-800">{d.value}</span>
                    <span className="text-xs text-gray-500 mt-1">{d.day}</span>
                  </div>
                ))}
              </div>

<div className="mt-4 text-sm text-gray-600">
                <span>Active Students per Day</span>{' '}
                <span className="font-semibold text-gray-700">
                  • Peak: {peak.day} ({peak.value})
                </span>
              </div>
            </div>
          </section>

{/* Right: Quick Actions and Tip */}
          <aside className="space-y-6">
            <div className="bg-white rounded-2xl p-6 shadow-sm">
              <h4 className="text-lg font-semibold text-gray-800 mb-2">Quick Actions</h4>

<button className="w-full flex items-center justify-center bg-gradient-to-r from-indigo-500 to-violet-500 text-white font-semibold rounded-lg py-3 mb-3">
                <span className="mr-2">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <path d="M3 12s0-6 9-6 9 6 9 6-9 6-9 6-9-6-9-6z" />
                    <circle cx="12" cy="12" r="3" />
                  </svg>
                </span>
                Start Monitoring
              </button>

<div className="space-y-3">
                <div className="flex items-center justify-between border border-gray-200 rounded-lg px-4 py-3 bg-white">
                  <div className="flex items-center gap-3">
                    <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-gray-100 text-gray-700">+</span>
                    <span className="text-sm font-medium text-gray-800">Add Student</span>
                  </div>
                </div>

<div className="flex items-center justify-between border border-gray-200 rounded-lg px-4 py-3 bg-white">
                  <div className="flex items-center gap-3">
                    <span className="w-5 h-5 inline-flex items-center justify-center text-gray-700">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                        <path d="M3 3v18h18" />
                        <path d="M9 3v18" />
                        <path d="M15 3v18" />
                      </svg>
                    </span>
                    <span className="text-sm font-medium text-gray-800">Generate Report</span>
                  </div>
                </div>

<div className="flex items-center justify-between border border-gray-200 rounded-lg px-4 py-3 bg-white">
                  <div className="flex items-center gap-3">
                    <span className="w-5 h-5 inline-block">
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                        <path d="M12 3l3 6 6 1-4.5 4.5L17 21l-5-3-5 3 1.5-6.5L3 10l6-1 3-6z" />
                      </svg>
                    </span>
                    <span className="text-sm font-medium text-gray-800">System Settings</span>
                  </div>
                </div>
              </div>
            </div>

<div className="bg-blue-50 border-l-4 border-blue-400 rounded-xl p-4 text-sm">
              <strong>System Tip</strong>
              <p className="mt-2 text-gray-700">
                Enable auto-alerts to get notified instantly when suspicious activity is detected during exams.
              </p>
            </div>
          </aside>
        </div>
      </div>
    </div>
  );
}

by GPT-5 Nano

Converted Designs

Request another