How to create a translucent text input in ReactJS ?

import React, { useState } from "react";
import "./App.css";
import Input from "./Input";

const App = () => {
    // The useState hook is used to manage the state of 
    // "value" that is used as placeholder attribute
    // and also to set it as a label when clicked
    const [value, setValue] = useState("");

    return (
        <div className="App">
            <div className="container">
                {/* "Input" component created using styled-components
       and animated using framer-motion
       */}
                <Input
                    value={value}
                    onChange={(id, value) => setValue(value)}
                    label={"First name"}
                />
            </div>
        </div>
    );
};

export default App;

import React from "react";
import {
    Wrapper, Input,
    Label, Underline
}
    from "./Component.styles";
import {
    motionLabel,
    motionUnderline
}
    from "./Component.motion";
import { useCycle } from "framer-motion";

export default ({ label, value, onChange, id, errors }) => {
    const onTapStart = (event, info) => {
        focus === "inactive" && cycleFocus();
        return blur === "inactive" && cycleBlur();
    };
    const onBlur = event => {
        value === "" && cycleFocus();
        cycleBlur();
    };
    const [focus, cycleFocus] = useCycle("inactive", "active");
    const [blur, cycleBlur] = useCycle("inactive", "active");
    return (
        <div>
            {/* Wrapper,Label,Underline - custom styled-components with 
               some of its attributes
        */}
            <Wrapper>
                <Input
                    onTap={onTapStart}
                    placeholder={label}
                    onBlur={e => onBlur(id)}
                    onChange={e => onChange(id, e.target.value)}
                    type={"text"}
                    required
                    value={value}
                />
                <Label {...motionLabel(focus)}>{label}</Label>
                <Underline {...motionUnderline(blur)} />
            </Wrapper>
        </div>
    );
 }

//Component.motion.js
const variantsWrapper = {
    initial: {},
    in: {},
    out: {},
    hover: {},
    tap: {}
};

const variantsLabel = {
    active: {
        x: -15,
        y: -20,
        scale: 0.7
    },
    inactive: { x: 0, y: 0, scale: 1 }
};
const variantsUnderline = {
    active: {
        width: "100%",
        transition: {
            ease: "easeIn",
            duration: 0.2
        }
    },
    inactive: {
        width: "0",
        transition: {
            ease: "easeIn",
            duration: 0.1
        }
    }
};

export const motionLabel = state =& gt; {
    return {
        animate: state,
        variants: variantsLabel
    };
};

export const motionUnderline = state =& gt; {
    return {
        animate: state,
        variants: variantsUnderline
    };
};

export const animationWrapper = {
    initial: "initial",
    animate: "in",
    exit: "out",
    whileHover: "hover",
    whileTap: "tap",
    variants: variantsWrapper
};

//Component.styles.js
import styled from "styled-components";
import { motion } from "framer-motion";

// Below are the styled-components used to
// make the animated text input box

export const Wrapper = styled(motion.div)`
    position: relative;
    width: 80%;
    padding: 18px;
    padding-bottom: 30px;
    border-bottom: 1px solid #2f528f;
`;

export const Label = styled(motion.span)`
    align-self: center;
    position: absolute;
    left: 0;
    top: 50%;
    grid-area: input;
    font-family: Montserrat;
    font-size: 18px;
    line-height: 18px;
    text-align: left;
    pointer-events: none;
    font-weight: normal;
    /* background: green; */
`;

export const Input = styled(motion.input)`
  height: 18px;
  font-size: 18px;
  -webkit-appearance: none;
  background: transparent !important;
  position: absolute;
  left: 0;
  top: 50%;
  padding: 0;
  padding-bottom: 5px;
  margin: 0;
  color: black;
  border: none;
  box-shadow: none !important;
  font-weight: normal;
  &:focus {
    outline: none;
  }
  &::placeholder {
    color: #f1f1f1;
  }
`;

export const Underline = styled(motion.div)`
    position: absolute;
    background-color: #2f528f;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
`;