Skip to content

Commit

Permalink
Dropwdown issue fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@Piyush-Tilokani
Piyush-Tilokani committed Aug 8, 2024
1 parent 4ef51fe commit aa8ce69
Showing 1 changed file with 93 additions and 70 deletions.
163 changes: 93 additions & 70 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,108 @@
import React from "react";


function App() {
return (
<div className="flex justify-center">
<div className="flex flex-col border-2 border-black h-screen w-[10%] bg-black text-white">
<div className="flex rounded-t-lg border-2 justify-center border-write h-[10%] w-[90%] mt-2 ml-1 mr-1 hover:bg-white hover:text-black">
choose
</div>
<div className="flex border-2 border-write justify-center h-[10%] w-[90%] ml-1 mr-1 hover:bg-white hover:text-black">
Gates
</div>
<div className="flex border-2 border-write justify-center h-[10%] w-[90%] ml-1 mr-1 hover:bg-white hover:text-black">
Resistace
</div>
<div className="flex border-2 border-write justify-center h-[10%] w-[90%] ml-1 mr-1 hover:bg-white hover:text-black">
Device
</div>
<div className="flex border-2 border-write justify-center h-[10%] w-[90%] ml-1 mr-1 hover:bg-white hover:text-black">
Wire
</div>
<div className="flex border-2 border-write justify-center h-[10%] w-[90%] ml-1 mr-1 hover:bg-white hover:text-black">
Electrifiy
</div>
<div className="flex border-2 border-write justify-center h-[10%] w-[90%] ml-1 mr-1 hover:bg-white hover:text-black">
Conductor
</div>
<div className="flex border-2 border-write justify-center h-[10%] w-[90%] ml-1 mr-1 hover:bg-white hover:text-black">
Power Control
</div>
<div className="flex border-2 border-write rounded-b-lg justify-center h-[10%] w-[90%] ml-1 mr-1 hover:bg-white hover:text-black">

</div>
<div className="flex rounded-t-lg border-2 justify-center border-write h-[10%] w-[90%] mt-2 ml-1 mr-1 hover:bg-white hover:text-black">
choose
</div>
<div className="flex border-2 border-write justify-center h-[10%] w-[90%] ml-1 mr-1 hover:bg-white hover:text-black">
Gates
</div>
<div className="flex border-2 border-write justify-center h-[10%] w-[90%] ml-1 mr-1 hover:bg-white hover:text-black">
Resistace
</div>
<div className="flex border-2 border-write justify-center h-[10%] w-[90%] ml-1 mr-1 hover:bg-white hover:text-black">
Device
</div>
<div className="flex border-2 border-write justify-center h-[10%] w-[90%] ml-1 mr-1 hover:bg-white hover:text-black">
Wire
</div>
<div className="flex border-2 border-write justify-center h-[10%] w-[90%] ml-1 mr-1 hover:bg-white hover:text-black">
Electrifiy
</div>
<div className="flex border-2 border-write justify-center h-[10%] w-[90%] ml-1 mr-1 hover:bg-white hover:text-black">
Conductor
</div>
<div className="flex border-2 border-write justify-center h-[10%] w-[90%] ml-1 mr-1 hover:bg-white hover:text-black">
Power Control
</div>
<div className="flex border-2 border-write rounded-b-lg justify-center h-[10%] w-[90%] ml-1 mr-1 hover:bg-white hover:text-black"></div>
</div>
<div className="flex justify-start flex-col border-2 border-black bg-black h-screen w-full">
<div className="flex h-[5%] flex-row w-full ">
<div className="flex border-2 h-full w-[10%] justify-center bg-black text-white border-white rounded-l-lg mt-1 mb-1 hover:bg-white hover:text-black">
a
</div>
<div className="flex border-2 justify-center bg-black text-white border-white h-full w-[10%] mt-1 mb-1 hover:bg-white hover:text-black">
b
</div>
<div className="flex border-2 justify-center bg-black text-white border-white h-full w-[10%] mt-1 mb-1 hover:bg-white hover:text-black">
c
</div>
<div className="flex border-2 justify-center bg-black text-white border-white h-full w-[10%] mt-1 mb-1 hover:bg-white hover:text-black">
d
</div>
<div className="flex border-2 justify-center bg-black text-white border-white h-full w-[10%] mt-1 mb-1 hover:bg-white hover:text-black">
e
</div>
<div className="flex border-2 justify-center bg-black text-white border-white h-full w-[10%] rounded-r-lg mt-1 mb-1 hover:bg-white hover:text-black">
f
</div>
<div className="relative flex border-2 justify-center bg-black text-white border-white ml-4 h-full w-[10%] rounded-lg mt-1 mb-1 hover:bg-white hover:text-black group">
Tools
<div className="absolute top-full left-0 w-full bg-white text-black mt-1 rounded-lg opacity-0 group-hover:opacity-100">
<a href="#" className="block px-4 py-2 border border-black hover:bg-gray-200">AI Help</a>
<a href="#" className="block px-4 py-2 border border-black hover:bg-gray-200">Export</a>
<a href="#" className="block px-4 py-2 border border-black hover:bg-gray-200">Save</a>
<a href="#" className="block px-4 py-2 border border-black hover:bg-gray-200">Restate</a>
<a href="#" className="block px-4 py-2 border border-black hover:bg-gray-200">Share</a>
<a href="#" className="block px-4 py-2 border border-black hover:bg-gray-200">Feedback</a>
<div className="flex border-2 h-full w-[10%] justify-center bg-black text-white border-white rounded-l-lg mt-1 mb-1 hover:bg-white hover:text-black">
a
</div>
<div className="flex border-2 justify-center bg-black text-white border-white h-full w-[10%] mt-1 mb-1 hover:bg-white hover:text-black">
b
</div>
<div className="flex border-2 justify-center bg-black text-white border-white h-full w-[10%] mt-1 mb-1 hover:bg-white hover:text-black">
c
</div>
<div className="flex border-2 justify-center bg-black text-white border-white h-full w-[10%] mt-1 mb-1 hover:bg-white hover:text-black">
d
</div>
<div className="flex border-2 justify-center bg-black text-white border-white h-full w-[10%] mt-1 mb-1 hover:bg-white hover:text-black">
e
</div>
<div className="flex border-2 justify-center bg-black text-white border-white h-full w-[10%] rounded-r-lg mt-1 mb-1 hover:bg-white hover:text-black">
f
</div>
<div className="relative flex border-2 justify-center bg-black text-white border-white ml-4 h-full w-[10%] rounded-lg mt-1 mb-1 hover:bg-white hover:text-black group">
Tools
<div className="absolute top-full left-0 w-full bg-white text-black mt-1 rounded-lg hidden group-hover:flex flex-col">
<a
href="#"
className="block px-4 py-2 border border-black hover:bg-gray-200"
>
AI Help
</a>
<a
href="#"
className="block px-4 py-2 border border-black hover:bg-gray-200"
>
Export
</a>
<a
href="#"
className="block px-4 py-2 border border-black hover:bg-gray-200"
>
Save
</a>
<a
href="#"
className="block px-4 py-2 border border-black hover:bg-gray-200"
>
Restate
</a>
<a
href="#"
className="block px-4 py-2 border border-black hover:bg-gray-200"
>
Share
</a>
<a
href="#"
className="block px-4 py-2 border border-black hover:bg-gray-200"
>
Feedback
</a>
</div>
</div>
<div className="flex border-2 justify-center text-white border-white ml-4 h-full w-[10%] rounded-l-lg mt-1 mb-1 hover:bg-white hover:text-black">
c-
</div>
<div className="flex border-2 justify-center text-white border-white h-full w-[10%] mt-1 mb-1 hover:bg-white hover:text-black">
[]
</div>
<div className="flex border-2 justify-center text-white border-white h-full w-[10%] rounded-r-lg mt-1 mb-1 hover:bg-white hover:text-black">
-D
</div>
</div>
<div className="flex border-2 justify-center text-white border-white ml-4 h-full w-[10%] rounded-l-lg mt-1 mb-1 hover:bg-white hover:text-black">
c-
</div>
<div className="flex border-2 justify-center text-white border-white h-full w-[10%] mt-1 mb-1 hover:bg-white hover:text-black">
[]
</div>
<div className="flex border-2 justify-center text-white border-white h-full w-[10%] rounded-r-lg mt-1 mb-1 hover:bg-white hover:text-black">
-D
</div>

</div>
<div className="border-2 border-black m-2 h-full w-[99%] rounded-lg bg-white">
</div>
<div className="border-2 border-black m-2 h-full w-[99%] rounded-lg bg-white"></div>
</div>


</div>
);
}
Expand Down

0 comments on commit aa8ce69

Please sign in to comment.