Zetro - Powerful JSX Runtime

How To Use It?

import Zetro from "zetro";

function Button({ text }) {
  return (
    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      {text}
    </button>
  );
}
function Card({ title, description }) {
  return (
    <div className="max-w-sm rounded overflow-hidden shadow-lg">
      <div className="px-6 py-4">
        <div className="font-bold text-xl mb-2">{title}</div>
        <p className="text-gray-700 text-base">{description}</p>
      </div>
      <div className="px-6 pt-4 pb-2">
        <Button text="Learn More" />
      </div>
    </div>
  );
}

function App() {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">Zetro Example</h1>
      <Card
        title="Card Title"
        description="This is a description of the card."
      />
    </div>
  );
}

Zetro.render(<App />, document.getElementById("app"));