Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React from "react";
function FruitForm() {
return (
<section class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800">
<form>
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
<div>
<label class="text-gray-700 dark:text-gray-200" for="username">
Fruit Name
</label>
<input
id="fruitName"
type="text"
class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
/>
</div>
<div>
<label class="text-gray-700 dark:text-gray-200" for="emailAddress">
Fruit Description
</label>
<input
id="description"
type="text"
class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
/>
</div>
</div>
<div class="flex justify-end mt-6">
<button class="px-6 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
Add
</button>
</div>
</form>
</section>
);
}
export default FruitForm;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment