Created
November 3, 2021 13:52
-
-
Save red-star25/113624f7ee8503d1f21e765ca738d46e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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