react-feather#Codepen JavaScript Examples

The following examples show how to use react-feather#Codepen. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Features.js    From webDevsCom with MIT License 4 votes vote down vote up
Features = ({ history }) => {
  return (
    <section id="features" className="container" style={{ marginTop: "1rem" }}>
      <div className="features">
        <div className="features-title has-text-centered">
          <h3 className="title is-3 is-bold">
            Access Hundreds of Resources in One Place.
          </h3>
          <p>Our contributors have aggregated all the information you need!</p>
        </div>
        <div className="columns">
          <div className="column is-5 is-offset-1">
            <div
              className="feature-card"
              onClick={() => history.push("/resources/1")}
            >
              <Codepen size={70} color="#00d1b2" />
              <div className="meta">
                <h3 className="has-text-info">Design Resources</h3>
                <p>
                  Take your UI/UX creative journey a little further. Find all
                  the resources you need as a developer to create beautiful and
                  memorable UI/UX.
                </p>
              </div>
            </div>

            <div
              className="feature-card"
              onClick={() => history.push("/resources/4")}
            >
              <Youtube size={70} color="#00d1b2" />
              <div className="meta">
                <h3 className="has-text-info">Top Youtube Channels</h3>
                <p>
                  Watch time tested and top coding channels on youtube. Learn
                  from the best. Learn all the tricks of the game here. We have
                  your back.
                </p>
              </div>
            </div>

            <div
              className="feature-card"
              onClick={() => history.push("/resources/55")}
            >
              <HelpCircle size={70} color="#00d1b2" />
              <div className="meta">
                <h3 className="has-text-info">FAQ in Interview</h3>
                <p>
                  Here we give you links to resources of Frequently asked
                  Interview Questions and their explainations with examples on
                  how to answer them.
                </p>
              </div>
            </div>
          </div>
          <div className="column is-5">
            <div
              className="feature-card"
              onClick={() => history.push("/resources/5")}
            >
              <Chrome size={70} color="#00d1b2" />
              <div className="meta">
                <h3 className="has-text-info">App Ideas</h3>
                <p>
                  Pick from the pool of app development project ideas at all
                  levels of programming. Learn and get Experience from Building
                  them.
                </p>
              </div>
            </div>

            <div
              className="feature-card"
              onClick={() => history.push("/resources/3")}
            >
              <UserPlus size={70} color="#00d1b2" />
              <div className="meta">
                <h3 className="has-text-info">Developer Portfolios</h3>
                <p>
                  Have a look at our collection of top Developers Portfolio. We
                  hope you will be inspired to put in more effort to acheive
                  greatness.
                </p>
              </div>
            </div>

            <div
              className="feature-card"
              onClick={() => history.push("/resources/2")}
            >
              <UploadCloud size={70} color="#00d1b2" />
              <div className="meta">
                <h3 className="has-text-info">Public APIs</h3>
                <p>
                  Play around with a collection of hundreds of public APIs to
                  ease your software and web development experiences.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="section" style={{ textAlign: "center" }}>
        <div className="features">
          <div className="features-title">
            <h3 className="title is-3 is-bold">Contribute Code</h3>
            <p>Contribute to this Open Source Project to Help Developers</p>
          </div>
        </div>

        <div className="columns is-multiline has-padding-10">
          <div className="column is-4 has-text-centered">
            <span className="has-text-primary has-margin-bottom-20">
              <AlertCircle size={45} />
            </span>

            <div className="is-size-5 has-text-weight-bold">Report Issue</div>
            <div className="is-size-6 has-text-centered has-margin-top-20">
              Open an issue if you want to suggest a new feature or report a
              bug.
            </div>
          </div>

          <div className="column is-4  has-text-centered ">
            <span className="has-text-primary has-margin-bottom-20">
              <Star size={45} />
            </span>

            <div className="is-size-5 has-text-weight-bold">Star</div>
            <div className="is-size-6 has-text-centered has-margin-top-20">
              We hope that, this website will help you to become a better
              programmer. Show your support by giving us a star on GitHub.
            </div>
          </div>

          <div className="column is-4  has-text-centered ">
            <span className="has-text-primary has-margin-bottom-20">
              <GitMerge size={45} />
            </span>

            <div className="is-size-5 has-text-weight-bold">Pull Request</div>
            <div className="is-size-6 has-text-centered has-margin-top-20">
              You are welcomed to send a pull request if you want to make
              changes or increase publicity for this project!
            </div>
          </div>
        </div>
      </div>
      <div
        className="section"
        style={{ marginBottom: "3rem", textAlign: "center" }}
      >
        <div className="features">
          <div className="features-title">
            <h3 className="title is-3 is-bold">Special Features</h3>
            <p>Special features of this website include...</p>
          </div>
        </div>

        <div className="columns is-multiline has-padding-10">
          <div className="column is-4 has-text-centered">
            <span className="has-text-primary has-margin-bottom-20">
              <Minimize size={45} />
            </span>

            <div className="is-size-5 has-text-weight-bold">Responsive</div>
            <div className="is-size-6 has-text-centered has-margin-top-20">
              Reading a Readme of a Repo on a mobile phone devices is a challenge
              for most users. This website supports responsiveness on all
              devices.
            </div>
          </div>

          <div className="column is-4  has-text-centered ">
            <span className="has-text-primary has-margin-bottom-20">
              <Filter size={45} />
            </span>

            <div className="is-size-5 has-text-weight-bold">
              Resource Filter
            </div>
            <div className="is-size-6 has-text-centered has-margin-top-20">
              Provides a good and handy feature to filter resources according to
              your requirements and needs.
            </div>
          </div>

          <div className="column is-4  has-text-centered ">
            <span className="has-text-primary has-margin-bottom-20">
              <Folder size={45} />
            </span>

            <div className="is-size-5 has-text-weight-bold">Collection</div>
            <div className="is-size-6 has-text-centered has-margin-top-20">
              A collection of several useful resources we think might be helpful
              to you as a programmer.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}