added more gradients and spaced copy btns to fit

src/plays/react-gradients/GradientComponent.js

@@ -49,11 +49,11 @@ const GradientComponent = ({ index, name, css, tailwind, colors }) => {
  // Gradient Component
  <div
  key={index}
- className="group relative h-72 w-[22rem] rounded-2xl transition-all duration-150 md:hover:scale-105 border-[6px] border-[#010326]"
+ className="group relative h-72 w-[22.5rem] rounded-2xl transition-all duration-150 md:hover:scale-105 border-[6px] border-[#010326]"
  style={{ background: css }}
  >
  {/* component containing buttons to copy code, colors of the gradient */}
- <div className="absolute md:group-hover:flex md:hidden flex right-0 top-0 w-fit rounded-lg rounded-tl-none rounded-br-none bg-[#010326] transition-all duration-200 p-1 justify-center items-center border-2 border-[#010326]">
+ <div className="absolute md:group-hover:flex md:hidden flex right-0 top-0 w-fit rounded-lg rounded-tl-none rounded-br-none bg-[#010326] transition-all duration-200 py-1 px-2 justify-center items-center border-2 border-[#010326]">
  <GradientCopyButton handleOnClick={copyTailwind}>
  <SiTailwindcss />
  </GradientCopyButton>
@@ -81,7 +81,7 @@ export default GradientComponent;
 const GradientCopyButton = ({ children, handleOnClick }) => {
  return (
  <button
- className="flex justify-center items-center text-center mx-1 p-2 text-gray-300 hover:text-white hover:bg-cyan-700 text-xl hover:bg-opacity-60 rounded-full transition-all duration-200"
+ className="flex justify-center items-center text-center p-2 text-gray-300 hover:text-white hover:bg-cyan-700 text-xl hover:bg-opacity-60 rounded-full transition-all duration-200"
  onClick={handleOnClick}
  >
  {children}

src/plays/react-gradients/Readme.md

@@ -72,4 +72,32 @@ Learn more about `JSON` Objects - https://developer.mozilla.org/en-US/docs/Learn
 
 Thank you so much for taking the time to read this. If you like this play, please do share about it and tag me [@itsammaar_7](https://twitter.com/itsammaar_7) and [@ReactPlayIO](https://twitter.com/ReactPlayIO). Also star the [react-play repository](https://github.com/reactplay/react-play), it gives me and all the [contributors](https://github.com/reactplay/react-play#contributors-) a boost in confidence
 
-**Happy Coding!!**
+**Happy Coding!!**
+
+
+
+## Description
+
+This is a new play consisting of a collection of beautiful gradients that can be copied either as TailwindCSS or CSS code and use in their application. Users are also able to copy each color used in a gradient.
+
+Fixes #442
+
+## Type of change
+
+- [x] New feature (non-breaking change which adds functionality)
+
+# How Has This Been Tested?
+
+This play has been tested on my local machine. It creates no new errors and passes all unit tests.
+**Screenshots:**
+
+
+# Checklist:
+
+- [x] I have performed a self-review of my own code
+- [x] I have commented my code, particularly in hard-to-understand areas
+- [x] I have made corresponding changes to the documentation
+- [x] My changes generate no new warnings
+- [ ] I have added tests that prove my fix is effective or that my feature works
+- [x] New and existing unit tests pass locally with my changes
+- [x] Any dependent changes have been merged and published in downstream modules

src/plays/react-gradients/gradients.json

@@ -1,50 +1,74 @@
 [
- {
- "name": "Midnight",
- "css": "linear-gradient(to right, #1d4ed8, #1e40af, #111827)",
- "tailwind": "bg-gradient-to-r from-blue-700 via-blue-800 to-gray-900",
- "colors": ["#1d4ed8", "#1e40af", "#111827"]
- },
  {
  "name": "Emerald",
  "css": "linear-gradient(to right, #10b981, #65a30d)",
  "tailwind": "bg-gradient-to-r from-emerald-500 to-lime-600",
  "colors": ["#10b981", "#65a30d"]
-
  },
  {
  "name": "Horizon",
  "css": "linear-gradient(#f97316, #fde047)",
  "tailwind": "bg-gradient-to-b from-orange-500 to-yellow-300",
  "colors": ["#f97316", "#fde047"]
-
+ },
+ {
+ "name": "Green Apple",
+ "css": "linear-gradient(to right, #22c55e, #15803d)",
+ "tailwind": "bg-gradient-to-r from-green-500 to-green-700",
+ "colors": ["#22c55e", "#15803d"]
+ },
+ {
+ "name": "Deep Blue",
+ "css": "linear-gradient(to right, #2563eb, #1e40af, #1e3a8a)",
+ "tailwind": "bg-gradient-to-r from-blue-600 via-blue-800 to-blue-900",
+ "colors": ["#2563eb", "#1e40af", "#1e3a8a"]
  },
  {
  "name": "Dawn",
  "css": "linear-gradient(to right, #fb7185, #fdba74)",
  "tailwind": "bg-gradient-to-r from-rose-400 to-orange-300",
  "colors": ["#fb7185", "#fdba74"]
-
+ },
+ {
+ "name": "Midnight",
+ "css": "linear-gradient(to right, #1d4ed8, #1e40af, #111827)",
+ "tailwind": "bg-gradient-to-r from-blue-700 via-blue-800 to-gray-900",
+ "colors": ["#1d4ed8", "#1e40af", "#111827"]
  },
  {
  "name": "Coral",
  "css": "linear-gradient(to right, #60a5fa, #34d399)",
  "tailwind": "bg-gradient-to-r from-blue-400 to-emerald-400",
  "colors": ["#60a5fa", "#34d399"]
-
  },
  {
  "name": "Flamingo",
  "css": "linear-gradient(to right, #f472b6, #db2777)",
  "tailwind": "bg-gradient-to-r from-pink-400 to-pink-600",
  "colors": ["#f472b6", "#db2777"]
-
  },
  {
  "name": "Ocean",
  "css": "linear-gradient(to right, #a5f3fc, #22d3ee)",
  "tailwind": "bg-gradient-to-r from-cyan-200 to-cyan-400",
  "colors": ["#a5f3fc", "#22d3ee"]
-
+ },
+ {
+ "name": "Metal",
+ "css": "conic-gradient(at right center, #c7d2fe, #475569, #c7d2fe)",
+ "tailwind": "bg-conic-to-r from-indigo-200 via-slate-600 to-indigo-200",
+ "colors": ["#c7d2fe", "#475569", "#c7d2fe"]
+ },
+ {
+ "name": "Green Galaxy",
+ "css": "radial-gradient(at left center, #06b6d4, #047857, #dbeafe)",
+ "tailwind": "bg-radial-at-l from-cyan-500 via-emerald-700 to-blue-100",
+ "colors": ["#06b6d4", "#047857", "#dbeafe"]
+ },
+ {
+ "name": "Pure Blue Shade",
+ "css": "conic-gradient(at left top, #14b8a6, #4338ca, #1f2937)",
+ "tailwind": "bg-conic-to-tl from-teal-500 via-indigo-700 to-gray-800",
+ "colors": ["#14b8a6", "#4338ca", "#1f2937"]
  }
 ]