JSFiddle - React, Tailwind, and code Playground

RSS feed reader

by tonytlwu

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jfhovinne/jFeed@0d411f761c26013fb8f960d5a0a20f848706fdc5/build/dist/jquery.jfeed.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<section class="py-5 text-center container">
  <div class="row py-lg-5">
    <div class="col-lg-6 col-md-8 mx-auto">
      <h1 class="fw-light">RSS feeds</h1>
      <p class="lead text-muted">Click to load feed</p>
      <div class="btn-group">
        <a href="#" class="btn btn-outline-secondary" data-url="https://feeds.bbci.co.uk/news/rss.xml">BBC News</a>
        <a href="#" class="btn btn-outline-secondary" data-url="https://www.buzzfeed.com/uk/index.xml">Buzzfeed</a>
        <a href="#" class="btn btn-primary" data-url="https://fliplet.com/feed">Fliplet</a>
        <a href="#" class="btn btn-outline-secondary" data-url="https://www.ft.com/news-feed">FT</a>
      </div>
    </div>
  </div>
</section>

<!-- Pagination -->
<section class="py-5 text-center container">
  <div class="row py-lg-5">
    <nav>
      <ul class="pagination">
        <li class="page-item disabled">
          <a class="page-link">Previous</a>
        </li>
        <li class="page-item active"><a class="page-link" href="#">1</a></li>
        <li class="page-item">
          <a class="page-link" href="#">2</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
          <a class="page-link"...

CSS

.card-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

JavaScript

/* You can use https://rss2json.com/ to load the RSS feeds */