JSX Playground

import React, { useState } from 'react';
import { Sparkles } from 'lucide-react';

export default function App() {
  const [count, setCount] = useState(0);

return (
    <div className="min-h-screen bg-slate-50 flex items-center justify-center p-8">
      <div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-8 w-full max-w-sm text-center space-y-6">
        <div className="flex justify-center">
          <div className="w-14 h-14 bg-indigo-100 rounded-2xl flex items-center justify-center">
            <Sparkles className="w-7 h-7 text-indigo-600" />
          </div>
        </div>

<div>
          <div className="text-5xl font-bold text-slate-900">{count}</div>
          <div className="text-slate-400 text-sm mt-1">clicks</div>
        </div>

<button
          onClick={() => setCount(c => c + 1)}
          className="w-full py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-medium transition-colors"
        >
          Click me
        </button>

<p className="text-xs text-slate-400">
          Made by{' '}
          <a href="https://jeremie.bornais.ca" target="_blank" rel="noopener noreferrer"
            className="text-indigo-500 hover:underline">
            Jeremie Bornais
          </a>
        </p>
      </div>
    </div>
  );
}

snippet -